/* 1999 theme: what a page looked like with (almost) no stylesheet */

:root {
  --bg: #ffffff;
  --text: #000000;
  --muted: #444444;
  --link: #0000ee;
  --visited: #551a8b;
  --active: #ee0000;
  --rule-dark: #808080;
  --rule-light: #ffffff;
  --badge-bg: #c0c0c0;
  --badge-hi: #ffffff;
  --badge-lo: #404040;
  --focus: #ffcc00;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #e8e8e8;
    --muted: #b0b0b0;
    --link: #66ccff;
    --visited: #cc99ff;
    --active: #ff6666;
    --rule-dark: #404040;
    --rule-light: #808080;
    --badge-bg: #303030;
    --badge-hi: #707070;
    --badge-lo: #101010;
    --focus: #ffcc00;

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  max-width: 42em;
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font: 1.125rem/1.5 "Times New Roman", Times, "Liberation Serif", serif;
  -webkit-text-size-adjust: 100%;
}

a:link { color: var(--link); }
a:visited { color: var(--visited); }
a:active { color: var(--active); }

a:focus-visible,
main:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
main:focus:not(:focus-visible) { outline: none; }

/* Hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 16px;
  top: 8px;
  padding: 4px 8px;
  background: var(--bg);
}

/* The good old bevelled rule */
hr {
  height: 0;
  margin: 1.25em 0;
  border: 0;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-light);
}

/* --- Header -------------------------------------------------------------- */

.site-name {
  margin: 0;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
}
.site-name a { color: inherit; text-decoration: none; }
.site-name a:hover { text-decoration: underline; }

.site-tagline {
  margin: 0.25em 0 0.75em;
  font-style: italic;
}

/* [ Home | Projects | Blog | Heroes ] */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav::before { content: "[\00a0"; }
.nav::after { content: "\00a0]"; }
.nav li + li::before {
  content: "|";
  padding: 0 0.5em;
}
/* Generous tap targets without changing the look */
.nav a { display: inline-block; padding: 4px 0; }

/* --- Content ------------------------------------------------------------- */

.cmd { display: none; }

h1 { font-size: 1.6em; margin: 0 0 0.5em; }
h2 { font-size: 1.35em; margin: 1.5em 0 0.5em; }
h3 { font-size: 1.15em; }

ul { padding-left: 1.5em; }
li { margin: 0.35em 0; }

.note { color: var(--muted); }
.projects .note { margin: 0.15em 0 0; }

.posts time,
.post-date {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
}
.posts time { margin-right: 0.5em; }

.post-date { margin: 0 0 0.5em; color: var(--muted); }
.post img { max-width: 100%; height: auto; }

code, pre { font-family: "Courier New", Courier, monospace; }
pre {
  overflow-x: auto;
  padding: 0.5em 0;
}

blockquote {
  margin: 1em 2em;
  font-style: italic;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  font-size: 0.9em;
  color: var(--muted);
}
.site-footer p { margin: 0.4em 0; }

/* An 88x31-style button, drawn in CSS (also used by the "Clanked" badge) */
.badge,
.ai-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--badge-bg);
  color: var(--text);
  border: 2px solid;
  border-color: var(--badge-hi) var(--badge-lo) var(--badge-lo) var(--badge-hi);
  font: bold 0.75rem/1.3 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge strong,
.ai-badge .ai-icon { color: var(--link); }

/* --- "Clanked" AI badge -------------------------------------------------- */

.ai-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.25em;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.ai-icon { width: 1.15em; height: 1.15em; flex: none; }

/* Visually hidden (but still read by screen readers) until hover/focus */
.ai-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ai-badge:hover .ai-tip,
.ai-badge:focus .ai-tip {
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  max-width: 15em;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.ai-badge:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ai-tip {
  padding: 2px 6px;
  background: #ffffe1;
  color: #000;
  border: 1px solid #000;
  font: normal 0.8rem/1.4 Verdana, Geneva, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}