/* Omarchy's own palette and face, lifted from omarchy.org's root.css so this
   site reads as part of that world. modest-ui ships black-and-white and themes
   through CSS variables, so retheming is only this block. */
:root {
  --omarchy-night: #1a1b26;
  --omarchy-storm: #24283b;
  --omarchy-terminal-black: #414868;
  --omarchy-terminal-white: #c0caf5;
  --omarchy-blue: #7aa2f7;
  --omarchy-cyan: #7dcfff;
  --omarchy-green: #9ece6a;
  --omarchy-turquoise: #b4f9f8;

  --mdst-color-bg: var(--omarchy-night);
  --mdst-color-fg: var(--omarchy-terminal-white);
  --mdst-color-border: rgb(65 72 104 / 0.8);
  --mdst-color-muted: #7b83a8;
  --mdst-color-subtle: var(--omarchy-storm);
  --mdst-color-surface: var(--omarchy-storm);
  --mdst-color-focus: var(--omarchy-cyan);
  --mdst-color-success: var(--omarchy-green);

  --mdst-button-hover-bg: var(--omarchy-blue);
  --mdst-button-hover-color: var(--omarchy-night);
  --mdst-button-hover-border: var(--omarchy-blue);

  /* omarchy.org is monospace throughout — not a stylistic flourish, it is the
     brand. JetBrains Mono with a real fallback stack. */
  --mdst-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --mdst-font-sans: var(--mdst-font-mono);
  --mdst-font-text: var(--mdst-font-mono);
  --mdst-font-ui: var(--mdst-font-mono);
  --mdst-line-height: 1.4;
}

body {
  background: var(--omarchy-night);
  color: var(--omarchy-terminal-white);
  margin: 0;
}

.page { max-width: 62rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

a { color: var(--omarchy-blue); }
a:hover { color: var(--omarchy-cyan); }

h1, h2, h3 { color: #fff; line-height: 1.2; }
h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 0.25rem; }
h2 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 3rem 0 0.5rem; }

.subtitle { color: var(--mdst-color-muted); margin: 0 0 2.5rem; }
.lede { color: var(--omarchy-terminal-white); max-width: 46rem; }
.muted { color: var(--mdst-color-muted); }
.small { font-size: 0.85em; }

/* The record. The one number the whole site exists to display. */
.record {
  border: 1px solid var(--omarchy-terminal-black);
  background: var(--omarchy-storm);
  padding: 1.75rem 1.5rem;
  margin: 0 0 1rem;
}
.record__label { color: var(--omarchy-green); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.record__time { font-size: clamp(2.75rem, 11vw, 5rem); color: #fff; line-height: 1; margin: 0.4rem 0; font-weight: 700; }
.record__meta { color: var(--mdst-color-muted); font-size: 0.9rem; }
.record__meta strong { color: var(--omarchy-terminal-white); font-weight: 500; }

/* Times render in the same shape the Completion Screen prints them. */
.time { color: var(--omarchy-turquoise); white-space: nowrap; font-weight: 500; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  border-left: 2px solid var(--omarchy-terminal-black);
  padding: 0 0 1.75rem 1.25rem;
  position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 0.45rem;
  width: 8px; height: 8px; background: var(--omarchy-blue); border-radius: 50%;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0.5rem; }
.timeline__head { color: #fff; font-weight: 700; }
.timeline__when { color: var(--mdst-color-muted); font-size: 0.8rem; letter-spacing: 0.04em; }
.timeline__body { margin: 0.35rem 0 0; max-width: 46rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: left; color: var(--mdst-color-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
th, td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid rgb(65 72 104 / 0.5); vertical-align: top; }

.tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.1rem 0.4rem;
  border: 1px solid var(--omarchy-terminal-black); color: var(--mdst-color-muted);
}

.notice {
  border: 1px solid var(--omarchy-terminal-black);
  border-left: 3px solid var(--omarchy-green);
  background: rgb(36 40 59 / 0.6);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.notice h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--omarchy-green); }
.notice p { margin: 0 0 0.5rem; }
.notice p:last-child { margin-bottom: 0; }

footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--omarchy-terminal-black); }

/* The installer's own logo.txt, rendered at whatever size keeps its 81 columns
   on screen. Scales with the viewport so it never forces a horizontal scroll. */
.logo {
  font-family: var(--mdst-font-mono);
  font-size: clamp(0.3rem, 1.15vw, 0.78rem);
  line-height: 1.05;
  color: var(--omarchy-blue);
  background: none;
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  overflow: visible;
  white-space: pre;
}

/* The domain reads like an official Omarchy property, so the disclaimer earns
   a place above the fold rather than only in the footer. */
.unaffiliated {
  border-left: 2px solid var(--omarchy-terminal-black);
  padding-left: 0.85rem;
  margin: 0 0 2.5rem;
  color: var(--mdst-color-muted);
  font-size: 0.82rem;
  max-width: 44rem;
}