/* Black by default, white on request. One column, no framework. Mono for structure, serif for prose. */
:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #d9d6cc;
  --dim: #8f8c83;
  --rule: #2e2d2a;
  --line: #6f6c63;
  --field: #0b0b0a;
  --hi: #f2efe6;
  --link: #7db4ff;
  --cta: #e3b341;
  --teal: #5fc9b8;
  --violet: #b79cff;
  --on-btn: #000;
  --err: #ff8a70;
  --err-tint: #2a120c;
  --cta-tint: #171204;
  --teal-tint: #07201d;
  --net: #3f3d37;
  --net-ws: #2f6159;
  --net-gw: #6f5a27;
  --net-tor: #51467e;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --prose: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --fg: #2a2926;
  --dim: #66635b;
  --rule: #dcdad2;
  --line: #8a877e;
  --field: #fff;
  --hi: #000;
  --link: #1a5fb4;
  --cta: #8a5a00;
  --teal: #0a7467;
  --violet: #5f43c9;
  --on-btn: #fff;
  --err: #b3261e;
  --err-tint: #fdf0ee;
  --cta-tint: #fbf6e8;
  --teal-tint: #e9f6f4;
  --net: #d2d0c7;
  --net-ws: #a9d8d1;
  --net-gw: #e0cb94;
  --net-tor: #d0c6f0;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 50rem;
  padding: 1.25rem 1rem 3rem;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.6 var(--prose);
  overflow-wrap: break-word;
}

a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--hi); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Three colours, one per part of the system: workstation, gateway, Tor. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 33.3%, var(--cta) 33.3% 66.6%, var(--violet) 66.6%);
  z-index: 5;
}
i { font-style: italic; }

h1, h2, h3 { font-family: var(--mono); color: var(--hi); font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.45rem; margin: 2.5rem 0 1rem; max-width: 34ch; }
h2 { font-size: 1rem; margin: 3.25rem 0 .9rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
h2 .n { color: var(--teal); font-weight: 400; margin-right: .6em; }
h3 { font-size: .95rem; margin: 1.8rem 0 .4rem; }
p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { padding-left: 1.3em; max-width: 66ch; }
li { margin-bottom: .3em; }

pre, code, table, label, legend, input, select, textarea, button, .mono {
  font-family: var(--mono);
}
code { font-size: .88em; color: var(--hi); }
pre {
  margin: 1.2rem 0;
  padding: .9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--fg);
}
.dim { color: var(--dim); }
.small { font-size: .85rem; }

/* header + footer */
.top {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  align-items: center;
  font: .85rem/1.6 var(--mono);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}
.top a { color: var(--fg); text-decoration: none; }
.top a:hover, .top a[aria-current] { color: var(--hi); text-decoration: underline; }
.top .home { color: var(--hi); font-weight: 600; margin-right: auto; }
.top .links { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; align-items: center; }
.top a.btn, .top a.btn:hover { color: var(--on-btn); text-decoration: none; }
.top .nav-apply { padding-inline: 1.3rem; font-size: .95rem; }
.top form { display: inline; }
.foot {
  margin-top: 4.5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font: .78rem/1.65 var(--mono);
  color: var(--dim);
}
.foot p { max-width: none; margin-bottom: .7em; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--hi); }
.foot nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .8rem; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.linkish:hover { color: var(--hi); }

/* tables */
.table-scroll { overflow-x: auto; margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; line-height: 1.45; }
th { text-align: left; color: var(--dim); font-weight: 400; }
th, td { padding: .42rem .9rem .42rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.ref { color: var(--teal); white-space: nowrap; width: 3rem; }

/* course */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .1rem 1.2rem; margin: 1.2rem 0;
  font: .85rem/1.65 var(--mono); }
.facts dt { color: var(--teal); }
.facts dd { margin: 0; }
.module { margin-top: 2.6rem; }
.module h2 { margin-top: 0; }
.lab { color: var(--violet); }
.lessons { list-style: none; padding: 0; max-width: none; margin: 0; }
.lessons li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .1rem .3rem; margin: 0 0 .85rem; }
.lessons .ref { font: .8rem/1.9 var(--mono); color: var(--teal); }
.lessons .t { font: .9rem/1.5 var(--mono); color: var(--hi); }
.lessons .s { grid-column: 2; font-size: .96rem; line-height: 1.45; }
.lessons .s .lab { font: .78rem var(--mono); }
.lessons a { color: var(--hi); }
.lessons .is-done, .lessons .is-done a { color: var(--dim); }

.note { border-left: 2px solid var(--teal); padding: .1rem 0 .1rem .9rem; margin: 1.4rem 0; max-width: 66ch; }
.note p:last-child { margin-bottom: 0; }

.faq dt { font: .9rem/1.5 var(--mono); color: var(--hi); margin-top: 1.5rem; }
.faq dd { margin: .3rem 0 0; max-width: 66ch; }

/* forms */
form.stack { max-width: 32rem; margin-top: 1.4rem; }
form.stack > div, form.stack > fieldset { margin-bottom: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
label, legend { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .35rem; padding: 0; color: var(--hi); }
label .dim { font-weight: 400; }
.req, .opt { font-size: .72rem; font-weight: 400; margin-left: .4em; padding: .05em .45em; border: 1px solid; white-space: nowrap; }
.req { color: var(--cta); }
.opt { color: var(--dim); }
.hint { font: .85rem/1.45 var(--prose); color: var(--dim); margin: 0 0 .45rem; }
.choice {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  margin: 0 0 .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  background: var(--field);
  font-weight: 400;
  cursor: pointer;
}
.choice input { width: 1.15rem; height: 1.15rem; margin: 0; flex: none; accent-color: var(--teal); }
.choice:hover { border-color: var(--teal); }
.choice:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.choice:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.has-error input:not([type=radio]), .has-error textarea, .has-error .choice { border-color: var(--err); }
.error-summary { margin: 1.2rem 0; padding: .8rem 1rem; max-width: 32rem; border: 1px solid var(--err); background: var(--err-tint); font: .9rem/1.5 var(--mono); }
.error-summary:focus { outline: none; }
.error-summary p { margin-bottom: .3rem; color: var(--err); }
.error-summary ul { margin: 0; }
.error-summary a { color: var(--err); }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%;
  padding: .55rem .6rem;
  background: var(--field);
  color: var(--hi);
  border: 1px solid var(--line);
  border-radius: 0;
  min-height: 44px;
  font-size: 16px; /* below 16px, iOS zooms the page when a field gets focus */
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--link); outline: 1px solid var(--link); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem .95rem;
  background: var(--cta);
  color: var(--on-btn);
  border: 1px solid var(--cta);
  font: 600 .85rem/1.4 var(--mono);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--hi); border-color: var(--hi); color: var(--on-btn); }
.btn-lg { min-height: 54px; padding: .7rem 1.5rem; font-size: 1.05rem; }
.btn-wide { width: 100%; }
.btn.ghost { background: none; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: none; color: var(--hi); border-color: var(--hi); }
.err { color: var(--err); font: .85rem/1.5 var(--mono); margin: .3rem 0; }
.flash { font: .85rem/1.5 var(--mono); border: 1px solid var(--rule); padding: .5rem .7rem; margin-top: 1rem; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* dashboard */
.bar { font: min(.85rem, 3.4vw)/1.6 var(--mono); white-space: pre; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem;
  font: .82rem/1.5 var(--mono); }
.pager a:last-child:not(:first-child) { text-align: right; }
.danger { margin-top: 3rem; }

/* cookie banner */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--field);
  border-top: 1px solid var(--line);
  padding: .85rem 1rem;
  font: .8rem/1.55 var(--mono);
  z-index: 10;
}
.consent[hidden] { display: none; }
.consent > div { max-width: 48rem; margin: 0 auto; }
.consent p { max-width: none; margin-bottom: .6rem; }
.consent .choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent .btn { flex: 1 1 8rem; max-width: 14rem; }
/* Lets the page scroll clear of the banner, so nothing is stuck behind it. */
body:has(.consent:not([hidden])) { padding-bottom: 13rem; }

@media (min-width: 40rem) {
  h1 { font-size: 1.75rem; }
  body { padding-top: 1.75rem; }
  pre { font-size: .85rem; }
}

.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dot { display: inline-block; width: .55em; height: .55em; margin-right: .5em; background: var(--teal); border-radius: 50%; }
.c-ws { color: var(--teal); }
.c-gw { color: var(--cta); }
.c-tor { color: var(--violet); }
.n-ws { color: var(--net-ws); }
.n-gw { color: var(--net-gw); }
.n-tor { color: var(--net-tor); }
.fill { color: var(--teal); }
.module:nth-of-type(3n+2) h2 .n, .module:nth-of-type(3n+2) .lessons .ref { color: var(--cta); }
.module:nth-of-type(3n) h2 .n, .module:nth-of-type(3n) .lessons .ref { color: var(--violet); }
.cta { margin-top: 3.5rem; padding: 1.3rem 1.3rem .6rem; background: var(--cta-tint); border: 1px solid var(--rule); border-left: 3px solid var(--cta); }
.cta h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-size: 1.15rem; }
.done { margin: 2.5rem 0 1.5rem; padding: 1rem 1.3rem .3rem; background: var(--teal-tint); border-left: 3px solid var(--teal); }
.done h1 { margin-top: 0; }
.tick { color: var(--teal); }
.narrow-only { display: block; }
.wide-only { display: none; }
@media (min-width: 46rem) {
  .narrow-only { display: none; }
  .wide-only { display: block; }
}

/* Network sketch in the margins: left the machines, right the path out. Wide screens only. */
.net { display: none; }
@media (min-width: 78rem) {
  .net {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 24ch;
    overflow: hidden;
    font: .75rem/1.5 var(--mono);
    pointer-events: none;
    user-select: none;
  }
  .net pre { margin: 0; padding: 1.25rem 0 0; border: 0; overflow: hidden; font: inherit; color: var(--net); }
  .net-left { right: calc(50% + 24.5rem); }
  .net-right { left: calc(50% + 24.5rem); }
}

/* Phones and touch screens: bigger targets, and nothing wider than the screen. */
@media (max-width: 48rem), (pointer: coarse) {
  .top a, .top .linkish, .foot nav a, .foot nav .linkish {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot nav { gap: 0 1.1rem; }
  .lessons .t a { display: inline-block; padding: .7rem 0; margin: -.55rem 0; }
  .pager a { display: inline-block; padding: .8rem 0; }
}
@media (max-width: 48rem) {
  .top { gap: 0 1rem; align-items: center; padding-bottom: .2rem; }
  .top .links { order: 3; flex: 1 0 100%; gap: 0 1rem; align-items: center; }
  .pager { flex-direction: column; gap: 0; }
  .pager a:last-child:not(:first-child) { text-align: left; }
  form.stack .btn { width: 100%; }
  .actions .btn { flex: 1 1 100%; }

  /* These tables have long text in every column, so each row becomes a small card. */
  .table-scroll:has(.cards) { overflow: visible; }
  .cards thead { position: absolute; left: -9999px; }
  .cards, .cards tbody, .cards tr, .cards td { display: block; width: 100%; }
  .cards tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  .cards td { border: 0; padding: .15rem 0; }
  .cards td::before { content: attr(data-label); display: block; color: var(--dim); font-size: .75rem; }
}
@media (max-width: 23rem) {
  .top .links { gap: 0 .7rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: .5rem; }
}
@media print {
  .net, .consent, #theme-toggle { display: none !important; }
}

.mt { margin-top: 2rem; }
.mt-s { margin-top: .9rem; }
.crumb { margin: 2rem 0 0; }
.after-crumb { margin-top: .4rem; }

/* TODO/demo tag: shown wherever the operator has not yet filled a field.
   Signals state honestly rather than hiding missing information. */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--dim);
  background: var(--field);
  margin: 0 4px 2px 0;
  line-height: 1.5;
}
.tag.demo { color: var(--cta); border-color: var(--cta); background: var(--cta-tint); }

#theme-toggle[hidden] { display: none; }