/* key-exchange: exhibit-only styles */
#paint-svg .pub-band { fill: var(--paper-2); stroke: var(--rule); }
#paint-svg .pl { fill: var(--ink-2); font: 17px var(--sans); }
#paint-svg .pl-head { fill: var(--ink-3); font: 600 15px var(--sans); letter-spacing: .08em; }
#paint-svg .pl-small { font-size: 15px; fill: var(--ink-3); }
#paint-svg .pl-key { fill: var(--verdigris); font-weight: 600; font-size: 15px; }
#paint-svg .pot { stroke: var(--ink-2); stroke-width: 1.5; }
#paint-svg .arr { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
#paint-svg .arr-head { fill: var(--ink-3); }

.clock-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.clock-wrap .stage { max-width: 26rem; width: 100%; margin: 0 auto; }
@media (max-width: 640px) { .clock-wrap { grid-template-columns: 1fr; } }
.clock-side .controls { margin-top: 0; }
#clock-svg .clk-face { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
#clock-svg .clk-hop { stroke: var(--verdigris); stroke-width: 1.2; }
#clock-svg .clk-hop.last { stroke: var(--brass); stroke-width: 2.2; }
#clock-svg .clk-dot { fill: var(--ink-3); }
#clock-svg .clk-dot.seen { fill: var(--verdigris); }
#clock-svg .clk-dot.cur { fill: var(--brass-lit); stroke: var(--brass); stroke-width: 1.5; }
#clock-svg .clk-num { fill: var(--ink-3); font-family: var(--mono); }
#clock-svg .clk-num.cur { fill: var(--ink); font-weight: 700; }
#clock-svg .clk-hand { stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; }
#clock-svg .clk-hub { fill: var(--brass); }
.seq-label { font-size: .85rem; color: var(--ink-3); margin: .75rem 0 .2rem; }
.seq { font-size: .95rem; margin: 0; word-spacing: .1em; overflow-wrap: anywhere; }
.gen-mark { font-size: .9rem; margin: .6rem 0 0; }
.gen-mark.yes { color: var(--verdigris); }
.gen-mark.no { color: var(--ink-2); }

.dh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
@media (max-width: 640px) { .dh-grid { grid-template-columns: 1fr; } }
.dh-col { border: 1px solid var(--rule); border-radius: 8px; padding: .6rem .8rem; background: var(--paper); }
.dh-col.dh-public { background: var(--paper-2); }
.dh-col h3 { font-size: .95rem; margin: 0 0 .4rem; }
.dh-col p { margin: .25rem 0; font-size: .95rem; }
.dh-col .key { color: var(--verdigris); }
#dh-match { color: var(--verdigris); font-weight: 600; }
#fig-dh .btn-row { margin: .6rem 0; }
@media (max-width: 640px) {
  #fig-dh .stage { --aspect: 16 / 9 !important; }
  #fig-bits .stage { --aspect: 16 / 10 !important; }
}

/* phones: put each slider on its own line under its label so readouts are never clipped,
   and enlarge the paint diagram's labels (the drawing is scaled down to the screen width) */
@media (max-width: 640px) {
  .control { grid-template-columns: 1fr auto; }
  .control > label { white-space: normal; }
  .control > input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  #paint-svg .pl { font-size: 23px; }
  #paint-svg .pl-head { font-size: 19px; letter-spacing: .04em; }
  #paint-svg .pl-small { font-size: 16px; }
  #paint-svg .pl-key { font-size: 20px; }
}