/* Styles for the security deck only. */

.title h1 { max-width: 14ch; }
.byline { font-weight: 700; margin-top: 1.2em; }
.hint { margin-top: 2.5em; }
@media (hover: none) { .hint { display: none; } }

/* Setup: two kinds of site */
.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 1.5em 3em;
  margin-top: 1em;
  max-width: 62em;
}
.kind { border-top: 3px solid var(--ink); padding-top: 0.8em; }
.kind p { font-size: 0.9em; color: var(--muted); }
.sitelist { list-style: none; margin: 0.4em 0 0.8em; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.sitelist li {
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 600;
  padding: 0.15em 0.6em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Follow one visit: the route, drawn large */
.route {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5em;
  counter-reset: hop;
}
.route li { counter-increment: hop; border-top: 4px solid var(--signal); padding-top: 0.7em; }
.route li h3::before { content: counter(hop) "  "; color: var(--signal); }
.route p { font-size: 0.85em; color: var(--muted); }
@media (max-width: 900px) {
  .route { grid-template-columns: 1fr; gap: 0.8em; }
  .route li { border-top: 0; border-left: 4px solid var(--signal); padding: 0 0 0 0.8em; }
}

/* DNS lookup */
.lookup { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1.5em; margin: 0.4em 0 1.2em; }
.lookup p { margin: 0; }
.lookup .names { font-family: var(--display); font-stretch: 90%; font-weight: 600; line-height: 1.35; }
.lookup .arrow { font-size: 2.5em; color: var(--signal); }
.lookup .server {
  font-family: var(--display);
  font-stretch: 120%;
  font-weight: 800;
  font-size: 1.6em;
  padding: 0.3em 0.8em;
  border: 3px solid var(--ink);
  border-radius: 6px;
}

/* Firewall: the port grid is the deck's showpiece */
.ports-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2em 4em;
  align-items: center;
}
.portgrid {
  width: min(58vh, 38vw);
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
  background: var(--paper);
}
.legend { list-style: none; padding: 0; margin: 1em 0 0; font-size: 0.85em; }
.legend li { display: flex; gap: 0.6em; align-items: baseline; margin-bottom: 0.5em; max-width: 30em; }
.swatch { flex: none; width: 0.9em; height: 0.9em; border-radius: 2px; transform: translateY(0.1em); }
.swatch.open { background: var(--allow); }
.swatch.admin { background: var(--signal); }
.swatch.closed { background: var(--line); }
@media (max-width: 900px) {
  .ports-layout { grid-template-columns: 1fr; }
  .portgrid { width: min(100%, 50vh); }
}

/* Three rules side by side */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
  gap: 1.2em 2.5em;
  margin: 0.6em 0 1.2em;
  max-width: 66em;
}
.rules > div { border-top: 3px solid var(--ink); padding-top: 0.7em; }
.rules p { font-size: 0.88em; color: var(--muted); }
.tally { font-size: 1.15em; }
.tally strong { font-family: var(--display); font-stretch: 120%; font-size: 1.8em; line-height: 1; }
.slide pre { max-width: 34em; }

/* Live headers */
.headers { margin: 0.2em 0 0.6em; display: grid; gap: 0.2em; max-width: 52em; }
.headers > div {
  display: grid;
  grid-template-columns: 1.4em minmax(12em, 15em) 1fr;
  gap: 0 0.8em;
  align-items: baseline;
}
.headers > div::before { content: ""; font-weight: 700; }
.headers > div.is-present::before { content: "✓"; color: var(--allow); }
.headers > div.is-missing::before { content: "✕"; color: var(--block); }
.headers > div.is-missing { color: var(--muted); }
.headers dt { font-family: var(--mono); font-weight: 600; font-size: 0.8em; }
.headers dd { margin: 0; font-size: 0.88em; }
@media (max-width: 700px) {
  .headers > div { grid-template-columns: 1.4em 1fr; }
  .headers dd { grid-column: 2; }
}
.slide .csp-proof {
  margin-bottom: 0;
  border-left: 4px solid var(--allow);
  padding-left: 0.8em;
  font-size: 0.88em;
}

/* Apps behind the desk */
.fort { display: flex; align-items: stretch; gap: 0; margin: 0.6em 0 1.2em; max-width: 60em; }
.fort .outside {
  display: flex;
  align-items: center;
  padding-right: 2.6em;
  font-family: var(--display);
  font-weight: 700;
  color: var(--muted);
}
.fort .wall {
  flex: 1;
  display: flex;
  align-items: center;
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 0.8em 0.8em 0.8em 0;
}
.fort .desk {
  margin-left: -1.6em;
  padding: 0.5em 0.9em;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  border-radius: 6px;
}
.fort .inside { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: 0.5em; padding-left: 1.5em; }
.fort .room {
  padding: 0.45em 0.8em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 700;
}
.fort .room span { display: block; font-weight: 400; font-size: 0.8em; color: var(--muted); }
.fort .vault { border-color: var(--ink); }

/* A day on the server */
.day { position: relative; margin: 1.5em 0 1em; max-width: 64em; }
.day .ticks { position: relative; height: 0.9em; border-bottom: 2px solid var(--ink); }
.day .ticks i { position: absolute; bottom: 0; width: 1px; height: 0.45em; background: var(--muted); }
.day .hours { list-style: none; margin: 0.3em 0 0; padding: 0; display: flex; justify-content: space-between; font-size: 0.7em; color: var(--muted); }
.day .events { list-style: none; margin: 0; padding: 0; position: relative; height: 7.5em; }
.day .events li {
  position: absolute;
  top: 0;
  width: 12em;
  padding: 0.6em 0 0 0.6em;
  border-left: 2px solid var(--signal);
}
.day .events li.is-flipped { padding: 0.6em 0.6em 0 0; border-left: 0; border-right: 2px solid var(--signal); text-align: right; transform: translateX(-100%); }
.day .events li:nth-child(even) { top: 2.6em; }
.day .events h3 { font-size: 0.95em; }
.day .events p { font-size: 0.75em; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .day .ticks, .day .hours { display: none; }
  .day .events { height: auto; display: grid; gap: 0.8em; }
  .day .events li, .day .events li:nth-child(even), .day .events li.is-flipped {
    position: static; width: auto; transform: none; text-align: left;
    border-right: 0; border-left: 2px solid var(--signal); padding: 0 0 0 0.6em;
  }
}

/* Recap */
.layers {
  list-style: none;
  margin: 0.4em 0 1.4em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: 0.9em 2em;
  max-width: 64em;
}
.layers li { border-left: 4px solid var(--ink); padding-left: 0.8em; }
.layers p { margin: 0; font-size: 0.85em; color: var(--muted); }