/* text2site — white, hardened, brutalist. Black rules, one red accent. */

:root {
  --bg: #ffffff;
  --fg: #0b0b0b;      /* near-black ink */
  --muted: #5f5f5f;   /* secondary text */
  --accent: #d40000;  /* red — the one accent */
  --line: #0b0b0b;    /* hard black rules */
  --soft: #e4e4e4;    /* subtle divider */
  --panel: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 14.5px/1.6 ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
        "Liberation Mono", Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { max-width: 84ch; margin: 0 auto; padding: 44px 22px 60px; }

::selection { background: var(--accent); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Masthead ---------------------------------------------------------------- */
.masthead {
  border-bottom: 3px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--soft);
}
.topline__ver { color: var(--fg); }
.logo {
  margin: 0;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.cursor {
  color: var(--accent);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.tagline {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* Input bar --------------------------------------------------------------- */
.bar {
  display: flex;
  border: 3px solid var(--line);
  margin-bottom: 30px;
}
#url {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  padding: 14px 15px;
}
#url::placeholder { color: var(--muted); }
#url:focus { box-shadow: inset 0 0 0 2px var(--accent); }
#go {
  border: 0;
  border-left: 3px solid var(--line);
  background: var(--line);
  color: #fff;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 14px 26px;
  cursor: pointer;
}
#go:hover { background: var(--accent); }
#go:disabled { cursor: progress; opacity: 0.6; }

/* Actions + output -------------------------------------------------------- */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.actions button {
  border: 2px solid var(--line);
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  cursor: pointer;
}
.actions button:hover:not(:disabled) { background: var(--line); color: #fff; }
.actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.status {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}
.status.err { color: var(--accent); font-weight: 700; }

.out {
  margin: 0;
  border: 2px solid var(--line);
  background: var(--panel);
  padding: 22px;
  min-height: 240px;
  font: inherit;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.out:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Prose ------------------------------------------------------------------- */
.prose {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 3px solid var(--line);
  max-width: 72ch;
}
.prose h2 {
  margin: 34px 0 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 24px 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
}
.prose h3::before { content: "? "; color: var(--accent); }
.prose p { margin: 0 0 12px; color: var(--muted); }
.prose code {
  font: inherit;
  background: var(--soft);
  padding: 0 4px;
  color: var(--fg);
}
.steps {
  margin: 0 0 12px;
  padding-left: 1.5em;
  color: var(--muted);
}
.steps li { margin-bottom: 7px; }
.steps li::marker { color: var(--accent); font-weight: 700; }

/* Footer ------------------------------------------------------------------ */
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--soft);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 600px) {
  main { padding: 30px 15px 44px; }
  .bar { flex-direction: column; }
  #go { border-left: 0; border-top: 3px solid var(--line); padding: 13px; }
  .status { margin-left: 0; width: 100%; }
  .out { padding: 16px; }
}