/* tinyrepo - TUI stylesheet.
   No framework, no JavaScript, no webfont: the terminal look comes from the
   monospace stack the reader already has and from box-drawing characters. */

:root {
  color-scheme: light dark;

  --bg:        #12100e;
  --panel:     #1a1714;
  --fg:        #d8cfc0;
  --dim:       #8a8176;
  --accent:    #ffb454; /* amber phosphor */
  --accent-2:  #7fd88f;
  --border:    #3a332c;
  --measure:   74ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:       #f5f1e8;
    --panel:    #ffffff;
    --fg:       #26221c;
    --dim:      #6b6355;
    --accent:   #a35c00;
    --accent-2: #1f6f3d;
    --border:   #d6cdbb;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
               "DejaVu Sans Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
}

main { max-width: var(--measure); margin: 0 auto; }

/* ── header ────────────────────────────────────────────────────────────── */

header { margin-bottom: 2rem; }

.logo {
  /* Not the boxed pre the rest of the page uses: the logo is a heading, not a
     command block. The line height is the fiddly part: in a terminal a glyph
     fills its cell, but in a browser "|" and "\" run the full em, so anything
     under about 1.3 makes the rows overlap. The lower clamp bound matters for the
     same reason: shrunk far enough, rounding to whole pixels closes the gap
     again, and 40 columns still fit a 360px screen at 0.7rem. */
  background: none;
  border: 0;
  color: var(--accent);
  font-size: clamp(0.7rem, 2.2vw, 1rem);
  line-height: 1.4;
  margin: 0 0 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  white-space: pre;
}

.tagline { color: var(--dim); margin: 0 0 1.25rem; }

/* ── download ──────────────────────────────────────────────────────────── */

/* The link points at /releases/latest/download/, which GitHub redirects to
   whatever the newest release holds, so the button never needs updating when a
   version ships. */
.get {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.get a.button {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.4rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}
.get a.button:hover { background: var(--accent); color: var(--bg); }

.get .other { color: var(--dim); font-size: 0.85rem; }
.get .other a { color: var(--dim); }
.get .other a:hover { color: var(--accent); }

/* ── language switch ───────────────────────────────────────────────────── */

.lang {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}
.lang a { color: var(--dim); text-decoration: none; }
.lang a:hover { color: var(--accent); }
.lang [aria-current="true"] {
  color: var(--bg);
  background: var(--accent);
  padding: 0 0.4rem;
}

/* ── sections ──────────────────────────────────────────────────────────── */

h2 {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}
h2::before { content: "── "; color: var(--border); }
h2::after  { content: " ───────────────────────────────────────────────────"; color: var(--border); }

p { margin: 0 0 1rem; }

a { color: var(--accent-2); }
a:hover { color: var(--accent); }

/* ── terminal block ────────────────────────────────────────────────────── */

pre {
  background: var(--panel);
  border: 1px solid var(--border);
  margin: 0 0 1.25rem;
  overflow-x: auto;
  padding: 0.85rem 1rem;
}
code { color: var(--fg); }
pre .p { color: var(--accent-2); }   /* prompt */
pre .c { color: var(--dim); }        /* comment */

:not(pre) > code {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 0.25rem;
}

/* ── table ─────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; margin-bottom: 1.25rem; }

table { border-collapse: collapse; width: 100%; }
th, td {
  border-bottom: 1px solid var(--border);
  padding: 0.3rem 0.75rem 0.3rem 0;
  text-align: left;
  vertical-align: top;
}
th { color: var(--dim); font-weight: 400; }
td:first-child { color: var(--accent); white-space: nowrap; }

/* ── callout ───────────────────────────────────────────────────────────── */

.note {
  border-left: 2px solid var(--accent);
  color: var(--dim);
  padding-left: 1rem;
}

/* ── footer ────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.85rem;
  margin-top: 3rem;
  padding-top: 1rem;
}

/* Blinking block cursor, off for anyone who asked for less motion. */
.cursor { background: var(--accent); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }