/* Styles for the BHWSI deck only. Pictures do the explaining; text stays short. */

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

/* The jargon word the slide explains, set like it appears in a tech conversation. */
.slide .term {
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 0.6em;
  padding: 0.1em 0.6em;
  font-family: var(--mono);
  font-size: 0.85em;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: 2em 4em;
  align-items: center;
}
.split p:not(.term) { font-size: 0.95em; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.pic { display: block; width: 100%; height: auto; max-height: 60vh; }
.pic.wide { max-height: 56vh; margin: 0.2em 0 0.6em; }
.wide-slide h2 { max-width: 32ch; margin-bottom: 0.2em; }
.slide .caption { color: var(--muted); max-width: 46em; font-size: 0.95em; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* SVG paint, drawn from the deck palette */
.f-ink { fill: var(--ink); }
.f-ink-soft { fill: var(--ink); opacity: 0.55; }
.f-paper { fill: var(--paper); }
.f-panel { fill: var(--panel); }
.f-line { fill: var(--line); }
.f-signal { fill: var(--signal); }
.f-allow { fill: var(--allow); }
.f-block { fill: var(--block); }
.f-muted { fill: var(--muted); }
.f-glass { fill: #dfe9f1; }
.f-none { fill: none; }
/* Lines and paths are unfilled unless they carry an f- class; zero specificity so f- always wins. */
:where(.pic) :where(path, line) { fill: none; }
.s-ink, .s-ink-thick, .s-line, .s-block, .s-allow-thick, .s-white, .s-dash { stroke-linecap: round; stroke-linejoin: round; }
.s-ink { stroke: var(--ink); stroke-width: 3; }
.s-ink-thick { stroke: var(--ink); stroke-width: 6; }
.s-line { stroke: var(--line); stroke-width: 3; }
.s-block { stroke: var(--block); stroke-width: 4; }
.s-allow-thick { stroke: var(--allow); stroke-width: 10; }
.s-white { stroke: #fff; stroke-width: 5; }
.s-dash { stroke: var(--muted); stroke-width: 3; stroke-dasharray: 8 10; }

.t, .t text { font-family: var(--text); font-size: 26px; fill: var(--ink); }
.t-b, .t .t-b { font-weight: 700; }
.t-m, .t .t-m { fill: var(--muted); }
.t-small { font-size: 22px; fill: var(--muted); }
.t-small-w { font-size: 18px; font-weight: 700; fill: #fff; }
.t-h { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 30px; }
.t-code { font-family: var(--mono); font-size: 22px; fill: var(--muted); }
.t-code-big { font-family: var(--mono); font-size: 28px; font-weight: 600; fill: var(--ink); }
.t-hand { font-family: var(--text); font-style: italic; font-size: 24px; fill: var(--ink); }
.t-dots { font-size: 40px; letter-spacing: 4px; fill: var(--muted); }
.t-ring text { font-size: 22px; }

/* Firewall grid */
.portgrid { width: min(58vh, 38vw); height: auto; aspect-ratio: 1; justify-self: center; }
@media (max-width: 900px) { .portgrid { width: min(100%, 50vh); } }

.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.6em; 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); }
.swatch.dot { background: var(--ink); opacity: 0.35; border-radius: 50%; }
.split p.also { font-size: 0.85em; margin: 0 0 0.6em; }

/* Minute grid */
.day-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
.pic.minutes { max-height: 50vh; }
.minutes .m { fill: var(--ink); opacity: 0.28; }
.minutes .q { fill: var(--signal); }
.minutes text { font-family: var(--text); font-size: 13px; fill: var(--muted); }
@media (max-width: 900px) { .day-split { grid-template-columns: 1fr; } }