/* Same palette as the terminal app (internal/tui/styles.go). */
:root {
  --bg: #000;
  --text: #e6e6e6;
  --comment: #808080;
  --dim: #4a4a4a;
  --accent: #ffb000;
  --mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.65 var(--mono); -webkit-text-size-adjust: 100%; }
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* The terminal fills the window; a thin bar under it. */
#shell {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
#shell[hidden] { display: none; }
#term { flex: 1; min-height: 0; }
#term .xterm { height: 100%; }
#term .xterm-viewport { background: var(--bg) !important; overflow-y: hidden; }

#bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 2px max(10px, env(safe-area-inset-bottom));
  font-size: 13px; color: var(--comment);
}
#bar a, #bar button { color: var(--comment); text-decoration: none; }
#bar a:hover, #bar button:hover { color: var(--text); }
#copy::after { content: "  copy"; color: var(--dim); }
#copy.done::after { content: "  copied"; color: var(--accent); }
#toast a { color: var(--accent); }

/* Phones get the common commands as buttons, and "type" for the keyboard;
   in a game, arrows instead. */
#chips, #pad { display: none; }
@media (pointer: coarse) {
  #chips:not([hidden]), #pad:not([hidden]) { display: flex; gap: 6px; padding-top: 8px; }
  #chips button, #pad button {
    flex: 1; padding: 10px 0; border: 1px solid #262626; border-radius: 6px;
    color: var(--text); font-size: 13px; white-space: nowrap; touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
  }
  #pad button { padding: 14px 0; font-size: 16px; }
  #chips button:active, #pad button:active { border-color: var(--accent); color: var(--accent); }
  #chips #kbd { color: var(--accent); }
  #totext { display: none; }
}

/* The text version: same content, no terminal. */
body.term main#text { display: none; }
main#text { max-width: 80ch; margin: 0 auto; padding: 32px 20px 64px; }
main#text nav { color: var(--dim); margin-bottom: 2em; }
main#text nav a { color: var(--comment); text-decoration: none; }
main#text nav a[aria-current] { color: var(--text); font-weight: bold; }
main#text h1 { font-size: inherit; color: var(--accent); margin: 1.5em 0 0; }
main#text h2 { font-size: inherit; font-weight: normal; color: var(--comment); margin: 2em 0 0.5em; }
main#text p { margin: 0 0 1em; }
main#text ul { margin: 0 0 1em; padding-left: 2ch; }
main#text li::marker { content: "- "; color: var(--comment); }
main#text ul.list, main#text ul.links { padding-left: 0; list-style: none; }
main#text ul.list li::marker, main#text ul.links li::marker { content: none; }
main#text .c { color: var(--comment); }
main#text code { color: var(--text); font-weight: bold; }
main#text .foot { margin-top: 3em; }