/* =============================================================================
   Protein Design: Molecular Dynamics
   -----------------------------------------------------------------------------
   Overrides for this page only. The shared rules live in assets/css/engage.css
   and ../protein.css and are not touched from here.

   10 October 2026. Three jobs.

     1. The nine-run roster. The students' setup paragraph says the nine
        systems differ in four ways; the roster is that sentence drawn, so the
        four variables and the two contact metrics read across one row.
     2. The house rule that a reader is never told how to work a control.
        md-viewer.js used to write a "drag to turn" line into every viewer;
        that was removed at source on 10 October, so this file only tightens
        the rail the line used to sit beside.
     3. A source note at the foot of the page, which is the only drafted
        sentence outside a figure read-out.
   ========================================================================== */

/* ============================================== THE PLOTS: THEIR ONE CLASS ==
   The six inline plots are written with the page's sans face on the <svg>
   itself and inherit it, so only the numbers inside them carry a class. One
   rule here does what a repeated font-family attribute on a hundred and
   twenty <text> elements used to do, which is most of the weight this page
   lost. Figures are not photographs, so they keep their own typography and
   must not fall back to the body face: a column of percentages only lines up
   while the digits are the same width.                                      */

.pd .mdfig .m { font-family: var(--font-mono); }

/* =================================================== THE NINE-RUN ROSTER ===
   A table, because it is one: nine rows, four variables, three measures. The
   numbers are tabular so a column of percentages lines up on the decimal, and
   a bar sits behind each one so the shape of the set is visible before any of
   it is read. Colour repeats what the number already says and never carries
   the meaning on its own.                                                   */

.pd .figwrap--nine { padding: var(--sp-3) var(--sp-3) var(--sp-2); }

.pd .nine {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.pd .nine th,
.pd .nine td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.pd .nine thead th {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gray-400);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-500);
  white-space: normal;
}
.pd .nine tbody th {
  font-weight: 650;
  color: var(--ink);
  font-family: var(--font-mono);
}
.pd .nine tbody th small {
  display: block;
  margin-top: .1rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--gray-500);
  letter-spacing: 0;
}
.pd .nine td { color: var(--gray-600); }
.pd .nine tbody tr:last-child th,
.pd .nine tbody tr:last-child td { border-bottom: 0; }

/* the group bands: the three truncations and the two pH runs read as sets */
.pd .nine tbody tr[data-fam="truncation"] th,
.pd .nine tbody tr[data-fam="pH 5.5"] th { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--leaf-700) 30%, #fff); }
.pd .nine tbody tr[data-fail] { background: color-mix(in srgb, var(--rust-700) 4%, #fff); }

/* the C-terminus a tag has taken over is the whole histidine-tag finding, so
   it is the one word in the table set apart */
.pd .nine td.is-blocked { color: var(--rust-700); font-weight: 650; }
.pd .nine td.nine__hip { font-family: var(--font-mono); color: var(--gray-500); }

/* the residue span, drawn on a 1-to-29 scale so the rungs of the ladder are
   a shape and not four numbers to hold in the head */
.pd .nine__len { width: 7.5rem; }
.pd .nine__span {
  position: relative;
  display: block;
  height: .4rem;
  border-radius: 999px;
  background: var(--gray-200);
}
.pd .nine__span i {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--slate-700);
  opacity: .55;
}
.pd .nine__n {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-400);
}

/* the two contact metrics */
.pd .nine__m { width: 7.5rem; }
.pd .nine__bar {
  display: block;
  height: .4rem;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}
.pd .nine__bar i { display: block; height: 100%; border-radius: 999px; background: var(--leaf-700); }
.pd .nine__bar i.warn { background: var(--amber-700); }
.pd .nine__bar i.bad  { background: var(--rust-700); }
.pd .nine__v {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--gray-600);
}
.pd .nine__r { font-family: var(--font-mono); font-weight: 650; color: var(--gray-600); }
.pd .nine__na { color: var(--gray-300); }

/* a nine-column table does not fit a phone, so it scrolls inside its own
   frame, the same way the plots beside it do */
@media (max-width: 62rem) {
  .pd .figwrap--nine .nine { min-width: 44rem; }
}

/* ======================================================== NO USAGE HINTS ===
   md-viewer.js used to print "drag to turn, scroll to zoom" over its stage.
   That is an instruction to the reader, which this wiki does not write, so it
   was removed at source on 10 October and the nine per-run reports lost it
   too. What the element still carries is the one line that is a legend rather
   than an instruction: in the pocket view it says the surface is the mean
   receptor and therefore does not move. That line stays visible.            */

.pd .mdv__rail { gap: var(--sp-3); }

/* ============================================================ SOURCE NOTE ==
   The foot of the references list: which document the prose came from and
   where the plotted numbers come from. It is drafted, so it is orange.      */

.pd .srcnote {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-200);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--gray-500);
}

/* ================================================================= JOINS ===
   A card holding a plot wants the plot to sit flush inside it, and the four
   key-finding cards each end on one.                                        */

.engage.pd .card > .figwrap:last-child,
.engage.pd .card > .mdv:last-child { margin-bottom: 0; }
.engage.pd .card > .figwrap { margin-top: var(--sp-5); }

/* A chapter's own h3s are the students' sub-headings and the contents rail
   links straight into them, so they need the clearance protein.css gives the
   panel itself. protein.css sets this for h3 to h5 inside a panel; the
   sections here are also .sec, which page.css gives a top rule, and inside
   the rail only one is ever on screen.                                      */
.pd .rail--seg > .rail__panel.sec > h3 { margin-top: var(--sp-7); }

/* print: the roster is the one thing on this page worth a page of its own */
@media print {
  .pd .figwrap--nine { break-inside: avoid; }
  .pd .mdv { display: none; }
}