/* Encryption Lab (information-technology/encryption-lab.php). The page chrome is the one-screen layout in /css/resource.css.
   On a laptop or desktop each topic is two panels side by side, filling the height (each scrolls inside itself if it
   must); on smaller screens they stack and the page scrolls. Theme tokens only; the keys' colours are named below. */

:root{
  --el-shared:var(--viz-7);   /* a shared secret key */
  --el-pub:var(--viz-3);      /* a public key */
  --el-priv:var(--viz-5);     /* a private key */
}

.rp-main{gap:10px}
.el-view{flex:1;min-height:0;display:flex;flex-direction:column}
.el-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:10px}
.el-main,.el-side{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px;overflow:auto}
.el-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;flex:none}
.el-toy{font:700 10.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-tint);border:1px solid var(--warn);border-radius:999px;padding:4px 9px;cursor:help}
.el-row{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end;flex:none}
.el-field{display:flex;flex-direction:column;gap:4px;font:600 11px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.el-grow{flex:1;min-width:200px}
.el-field input[type=text]{font:500 16px/1.3 var(--font-mono);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;min-height:40px;text-transform:none;letter-spacing:0;width:100%}
.el-field input[type=text]:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.el-field input[type=range]{width:100%;accent-color:var(--accent);min-height:30px;margin:0}
.el-field output{color:var(--ink);font-family:var(--font-mono)}
.el-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:40px;cursor:pointer}
.el-check input{width:18px;height:18px;accent-color:var(--bad)}

/* the Caesar cells and the XOR table */
.el-cells{flex:1;min-height:0;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.el-cell{display:inline-flex;flex-direction:column;align-items:center;min-width:34px;padding:4px 4px 5px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.el-cell b{font:700 17px/1.2 var(--font-mono);color:var(--ink)}
.el-cell b.to{color:var(--accent-deep)}
.el-cell i{font:600 10px/1.2 var(--font-mono);color:var(--el-shared);font-style:normal;min-height:12px}
.el-cell.same{opacity:.55}
.el-cap{width:100%;margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.el-xor{width:100%;overflow-x:auto}
.el-xor table{font:13px var(--font-mono);width:auto}
.el-xor th,.el-xor td{padding:4px 7px;text-align:center;border-bottom:1px solid var(--line)}
.el-xor tbody th{text-align:left;font:600 11px var(--font-display);text-transform:uppercase;color:var(--muted)}
.el-xor td.key{color:var(--el-shared)}
.el-xor tr.res td{color:var(--accent-deep);font-weight:700}
.el-out{flex:none;display:grid;gap:6px}
.el-out div{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border-radius:6px;padding:7px 10px}
.el-out .k{font:600 10.5px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.el-out .v{font:600 15px/1.35 var(--font-mono);color:var(--ink);word-break:break-all;background:none;padding:0}
.el-out .v.ok{color:var(--ok)}
.el-brute{flex:none}
.el-brute-list{margin:6px 0 0;padding:0;list-style:none;font:13px/1.5 var(--font-mono);color:var(--muted);columns:2;column-gap:14px;max-height:none}
.el-brute-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-brute-list li .num{display:inline-block;width:2ch;text-align:right;color:var(--ink-soft)}
.el-brute-list li.hit{color:var(--bad);font-weight:700}

/* the scenes */
.el-scene{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center}
.el-scene svg{display:block;width:100%;height:100%;max-height:100%}
.el-net{stroke:var(--line-strong);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;fill:none}
.el-netlab{fill:var(--muted);font:12px var(--font-body)}
.el-tap{stroke:var(--bad);stroke-width:1.6;stroke-dasharray:4 4;opacity:.6}
.el-person circle,.el-person path{fill:var(--panel-2);stroke-width:2.4}
.el-person.alice circle,.el-person.alice path{stroke:var(--accent)}
.el-person.bob circle,.el-person.bob path{stroke:var(--accent-b)}
.el-person.eve circle,.el-person.eve path{stroke:var(--bad)}
.el-name{fill:var(--ink);font:700 14px var(--font-display)}
.el-key circle,.el-key path{fill:none;stroke-width:3;stroke-linecap:round}
.el-key.shared circle,.el-key.shared path{stroke:var(--el-shared)}
.el-key.pub circle,.el-key.pub path{stroke:var(--el-pub)}
.el-key.priv circle,.el-key.priv path{stroke:var(--el-priv)}
.el-klab{font:600 12.5px var(--font-body)}
.el-klab.shared{fill:var(--el-shared)}
.el-klab.pub{fill:var(--el-pub)}
.el-klab.priv{fill:var(--el-priv)}
.el-envg{transition:transform .8s cubic-bezier(.4,.1,.2,1)}
.el-env rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:2}
.el-env .fold{fill:none;stroke:var(--line);stroke-width:1.4}
.el-env .t{fill:var(--muted);font:600 10.5px var(--font-display);text-transform:uppercase;letter-spacing:.05em}
.el-env .c{fill:var(--ink);font:700 13.5px var(--font-mono)}
.el-env.cipher rect{stroke:var(--el-shared);fill:var(--warn-tint)}
.el-env.plain rect{stroke:var(--ok);fill:var(--ok-tint)}
.el-env.signed rect{stroke:var(--accent);fill:var(--accent-tint)}
.el-env.bad rect{stroke:var(--bad);fill:var(--bad-tint)}
.el-env.copy rect{stroke:var(--bad);stroke-dasharray:5 4;fill:var(--panel)}
.el-bubble rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.4}
.el-bubble text{fill:var(--ink);font:600 12.5px var(--font-body)}
.el-bubble.bad rect{stroke:var(--bad);fill:var(--bad-tint)}
.el-bubble.ok rect{stroke:var(--ok);fill:var(--ok-tint)}
.el-step{flex:none;margin:0;padding:8px 12px;border-radius:6px;background:var(--panel-2);border-left:3px solid var(--active);font-size:14.5px;line-height:1.5;color:var(--ink-soft);min-height:4.4em}
.el-step b{color:var(--ink)}
.el-stepper{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.el-stepper .btn{min-height:40px}
.el-count{font-size:13px;color:var(--muted);min-width:7em;text-align:center}

/* the numbers */
.el-keys{display:flex;flex-wrap:wrap;gap:6px}
.el-chip{font:600 12px/1 var(--font-mono);padding:6px 9px;border-radius:999px;border:1.5px solid}
.el-chip.pub{color:var(--el-pub);border-color:var(--el-pub)}
.el-chip.priv{color:var(--el-priv);border-color:var(--el-priv)}
.el-tablewrap{overflow-x:auto;flex:none}
.el-table{font:13px var(--font-mono);width:auto}
.el-table th{font:600 10.5px/1.2 var(--font-display);text-transform:none;letter-spacing:0;color:var(--muted);white-space:nowrap}
.el-table td{text-align:right;padding:5px 6px}
.el-table tr.bad td{color:var(--bad)}
.el-table tr.ok td{color:var(--ok);font-weight:700}
.el-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.el-note b{color:var(--ink-soft)}
.el-calc{display:flex;flex-direction:column;gap:5px}
.el-calc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:6px 10px;border-radius:6px;background:var(--panel-2);transition:opacity .3s}
.el-calc-row .k{font-weight:600;color:var(--ink);font-size:14px}
.el-calc-row .f{grid-column:1;font:12px var(--font-mono);color:var(--muted)}
.el-calc-row b{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:18px;color:var(--accent-deep)}
.el-calc-row.later{opacity:.4}
.el-verdict{padding:9px 12px;border-radius:6px;font-weight:600;font-size:14px}
.el-verdict.ok{background:var(--ok-tint);color:var(--ok);border:1px solid var(--ok)}
.el-verdict.bad{background:var(--bad-tint);color:var(--bad);border:1px solid var(--bad)}

/* HTTPS */
.el-addr rect{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.4}
.el-addr text{fill:var(--ink-soft);font:13px var(--font-mono)}
.el-addr.secure rect{stroke:var(--ok)}
.el-addr.secure .el-lock{fill:var(--ok)}
.el-addr.warn rect{stroke:var(--bad);fill:var(--bad-tint)}
.el-addr.warn text{fill:var(--bad);font-weight:700}
.el-lane rect{fill:var(--accent-tint);stroke:var(--accent);stroke-width:1.6}
.el-lane.ca rect{fill:var(--panel-2);stroke:var(--line-strong);stroke-dasharray:4 3}
.el-lane text{fill:var(--ink);font:700 13px var(--font-display)}
.el-life{stroke:var(--line-strong);stroke-width:1.6;stroke-dasharray:5 5}
.el-ca-link{stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:3 4}
.el-small{fill:var(--muted);font:11px var(--font-body)}
.el-msg path{stroke:var(--ink-soft);stroke-width:1.8;fill:none}
.el-msg text{fill:var(--ink-soft);font:12.5px var(--font-body)}
.el-msg.locked path{stroke:var(--el-pub)}
.el-msg.cur path{stroke:var(--active);stroke-width:3}
.el-msg.cur text{fill:var(--ink);font-weight:700}
.el-msg.self rect{fill:var(--panel-2);stroke:var(--line-strong)}
.el-msg.self.cur rect{fill:var(--active-tint);stroke:var(--active);stroke-width:2}
.el-msg.self.fail rect{fill:var(--bad-tint);stroke:var(--bad);stroke-width:2}
.el-msg.self.fail text{fill:var(--bad);font-weight:700}
.el-arrowhead{fill:var(--ink-soft)}
.el-stop{fill:var(--bad);font:700 15px var(--font-display)}
.el-cert{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--paper);flex:none}
.el-cert div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;font-size:13.5px;padding:2px 4px;border-radius:4px}
.el-cert .k{color:var(--muted);font:600 11px/1.6 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.el-cert .v{color:var(--ink);word-break:break-word}
.el-cert div.bad{background:var(--bad-tint)}
.el-cert div.bad .v{color:var(--bad);font-weight:700}
.el-steps{margin:0;padding-left:22px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.el-steps li.done{color:var(--ink-soft)}
.el-steps li.cur{color:var(--ink);font-weight:700}
.el-steps li.skip{text-decoration:line-through;opacity:.6}
.el-steps li.fail{color:var(--bad)}
.el-quiz{flex:1;min-height:0}

@media (prefers-reduced-motion:reduce){.el-envg,.el-calc-row{transition:none}}

@media (max-width:900px){
  .el-work{grid-template-columns:1fr;flex:none}
  .el-view{flex:none}
  .el-main,.el-side{overflow:visible}
  .el-scene{flex:none}
  .el-scene svg{height:auto}
  .el-cells{flex:none}
  .el-quiz{flex:none}
}
@media (max-width:560px){
  .el-brute-list{columns:1}
  .el-name{font-size:17px}
  .el-klab{font-size:15px}
  .el-bubble text{font-size:14px}
  .el-msg text{font-size:14px}
}
/* laptops with little height: the scenes get the room */
@media (min-width:901px) and (max-width:1100px){
  .el-work{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}
}
@media (min-width:901px) and (max-height:720px){
  .el-step{font-size:13.5px;min-height:0;padding:6px 10px}
  .el-stepper .btn{min-height:34px;padding:6px 12px}
  .el-main,.el-side{gap:6px}
}