/* horcom handbook theme
   Drawn from the original program's own look. The night sky of Robert
   Rettig's splash screen, the green info panel of his main menu
   RGB(192,220,192), the fixed pitch MODERN font of every screen, and the
   four element colours of the zodiac ring. */

:root {
  --sky: #0a0f1e;
  --sky-high: #101830;
  --panel: #131a2c;
  --panel-edge: #232d4a;
  --ink: #e9e5d9;
  --ink-dim: #a7a498;
  --gold: #d4a94a;
  --gold-dim: #8f7433;
  --rr-green: #c0dcc0;
  --rr-ink: #1c2b1c;
  --fire: #ff6a5e;
  --earth: #b9b45c;
  --air: #5fc0c0;
  --water: #6fdcec;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font: 16px/1.65 Georgia, "Times New Roman", serif;
}

/* the himmel banner, a pure CSS starfield */
header.sky {
  position: relative;
  padding: 3.2rem 1.5rem 2.6rem;
  text-align: center;
  background:
    radial-gradient(1px 1px at 12% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 28% 68%, #cfd8ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 41% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 55% 58%, #ffe9b0 99%, transparent),
    radial-gradient(1px 1px at 63% 30%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 74% 70%, #cfe4ff 99%, transparent),
    radial-gradient(1px 1px at 84% 25%, #fff 99%, transparent),
    radial-gradient(1px 1px at 92% 60%, #ffd9c9 99%, transparent),
    radial-gradient(1px 1px at 8% 80%, #fff 99%, transparent),
    radial-gradient(1px 1px at 47% 85%, #fff 99%, transparent),
    linear-gradient(180deg, #060a16 0%, var(--sky-high) 70%, var(--sky) 100%);
  border-bottom: 1px solid var(--panel-edge);
}

header.sky h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
}

header.sky p.sub {
  margin: 0.6rem 0 0;
  color: var(--ink-dim);
  font-style: italic;
}

nav.crumbs {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.8rem 1.5rem 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}

nav.crumbs a { color: var(--air); text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; }

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}

h2 {
  font-family: var(--mono);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  border-bottom: 1px solid var(--panel-edge);
  padding-bottom: 0.35rem;
  margin-top: 2.6rem;
}

h3 {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--air);
  margin-top: 1.8rem;
}

h4 {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink);
  margin: 1.4rem 0 0;
}

a { color: var(--water); }

p { margin: 0.8rem 0; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  padding: 0.08em 0.35em;
  color: var(--water);
}

pre {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 0.83rem;
}

/* Robert's voice. Styled after the green information panel of the
   original main menu. */
blockquote.rr {
  margin: 1.4rem 0;
  padding: 0.9rem 1.2rem;
  background: var(--rr-green);
  color: var(--rr-ink);
  border-radius: 4px;
  border-left: 6px solid #5d8a5d;
  font-family: var(--mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
}

blockquote.rr footer {
  margin-top: 0.55rem;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  color: #3c553c;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

th, td {
  border: 1px solid var(--panel-edge);
  padding: 0.45rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

td code { white-space: nowrap; }

.note {
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 0.7rem 1.1rem;
  background: rgba(212, 169, 74, 0.07);
  font-size: 0.92rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}

.card h3 { margin-top: 0.2rem; }
.card p { font-size: 0.9rem; color: var(--ink-dim); }
.card .status { font-family: var(--mono); font-size: 0.75rem; }
.status.done { color: #7fd87f; }
.status.open { color: var(--ink-dim); }

.element-fire { border-top: 3px solid var(--fire); }
.element-earth { border-top: 3px solid var(--earth); }
.element-air { border-top: 3px solid var(--air); }
.element-water { border-top: 3px solid var(--water); }

footer.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--panel-edge);
  color: var(--ink-dim);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
}