/* ============================================================
   claude-code-hooks — showcase page
   One terminal window, nothing else.

   The palette below is load-bearing: scripts/ansi-to-html.ts writes
   `var(--red)`, `var(--cyan)`, `var(--fg-dim)` &c. straight into the
   captured markup, so these custom property names must keep existing
   with these values. They mirror the chalk output of src/tui/theme.ts.
   ============================================================ */

:root {
  /* Straight out of ~/.hyper.js — the terminal this page is pretending to be.
     Only --fg-dim departs from it: Hyper's lightBlack (#616166) lands at 2.3:1
     on this ground, and it carries every duration, path and metadata line. */
  --bg:          #1b1a1c;   /* desk behind the window */
  --term-bg:     #29282a;   /* backgroundColor */
  --term-bar:    #29282a;   /* unibody: the titlebar shares that ground */
  --fg:          #d2d2da;   /* foregroundColor */
  --fg-bright:   #fafaff;   /* lightWhite */
  --fg-dim:      #8f8f98;   /* lightBlack, lifted to 4.6:1 (AA) */
  --line:        #3a393c;

  /* badge / accent colors (chalk 16-color names → Hyper's palette) */
  --magenta:     #ce3cff;   --magenta-br:  #fa77fa;
  --green:       #4ee4c4;   --brightgreen: #76f797;   /* limeGreen */
  --yellow:      #f9df79;   --yellow-br:   #efec84;
  --red:         #ff3c80;   --red-br:      #ff7caa;
  --cyan:        #32dee1;   --cyan-br:     #80c8c4;
  --blue:        #8260ff;   --blue-br:     #6a76fb;

  --clay:        #ff9f57;   /* orange — banner border, branch label, headings */
  --cursor:      #76f79780; /* cursorColor: limeGreen at 50% */

  --mono: "Lilex Nerd Font", "Hack Nerd Font", ui-monospace, "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace, "HooksGlyphFallback";

  --fs: 14px;          /* terminal metrics: 14px / 1.2, weight 500 */
  --lh: 1.2;
  --fw: 500;
}

/* The Agent tool icon (U+F0495) is a Nerd Font private-use glyph — tofu for
   anyone without one installed. This is Hack Nerd Font (MIT) subset to that
   single codepoint: 680 bytes, and unicode-range keeps it from touching any
   other character, so a real Nerd Font always wins when present. */
@font-face {
  font-family: "HooksGlyphFallback";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAKoAA4AAAAABgwAAAJYAAMAxAAAAAAAAAAAAAAAAAAAAAAAAAAAGhQbIBwqBmAAMBEICmx2ATYCJAMGCwYABCAFhg4HIBsZBRFVlBkEf0pga2x+14TIuuquWppnKEp82YUaBulwlo+OLScNf/I+5nj4/7X/7TNzv5gkQ8wS6UNyTaqRqo2Gh65RzFeHyEvIYfD8B7y41A2Zlr9OWFIDn8StZsljTjlrBS0QDjjAA/qTUDg+AEq/PzuG5cuIv0gw//4m19YP3BYNE01s0fYHlC2xAgs0i/NoLP3X+RIMJE698mY0nz3C5FEVM5UJgUpAFB7lOnWLBYsWL1UqQQHQE/oMyNpV71i7e5fW9j5I6Ukoomh8uo+Lb01236asPqkoLsszMkq0S4bmi1uFVIn3n+fU+IaAtKboBXrlyJDQKFeORpWgExBq0tlydxYL1MDgIkizh4cBEiClsrzyUB1qD92Lk8/PvDz1an9rZ5VZeV4ZVXmF4jYMnXLp06c53D/GscuWnbhyhXMtBHL3njz/8351ZvxlpeBlQ8P30X/TJaFYBoIUcXrS4l0j0GciPbEFgazu5mkQaKjEMrlIZbiPkkKn+1Km2m8pN8U/KRkRo6SimBXLzizWmWE2g/DPLMNESD3ToEhyGZbBmz016ODf/Bf7Q/2NZsA4iOBHkuo9PKhhIY7HtLuXg77/pFB3XVg4PX7ja1xjH+1Fe/enAxONvf4MPo66N97unQ3KAG8HKs1Tae5tmsCtsm3u/u21oyrLeV1WCsUzyeC5KXC4VgNE/f7GwLT8pMWPTEthPZLJKwqCQUFC1I1uSeIXyIrqQVm+iFbRvaMPPZ3wIiFCGVm8nazqFH8oAPlCVxBbIAhi1yQItYzVPHjtpPMtJMmMAwA=) format("woff2");
  unicode-range: U+F0495;
  font-display: block;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -15%, #241f2b 0%, transparent 62%),
    var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-weight: var(--fw);
  letter-spacing: -0.01em;   /* Hyper's global css block */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.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;
}

/* ---------- window ---------- */

.stage {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2.5vw, 34px);
}

.window {
  width: 100%;
  max-width: 1180px;
  height: min(92dvh, 940px);
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  border: 1px solid #00000060;
  border-radius: 14px;
  box-shadow: 0 40px 90px -25px #000e, 0 0 0 1px #ffffff0d inset;
  overflow: hidden;
}

/* Unibody, like Hyper: no bar of its own, just tab text floating on the same
   ground as the terminal. */
.titlebar {
  flex: none;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px 6px;
  background: var(--term-bar);
}

.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.l-r { background: #ff5f57; }
.l-y { background: #febc2e; }
.l-g { background: #28c840; }

.tab-branch { color: var(--clay); white-space: nowrap; }
.tab-title  { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: center; }
.tab-title::before { content: "· "; }
.tab-cwd    { color: var(--fg-dim); white-space: nowrap; justify-self: end; }

.tb-actions { justify-self: end; display: flex; gap: 4px; }

.tb-btn {
  font: inherit;
  font-size: calc(var(--fs) * 0.95);
  line-height: 1;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 7px;
  cursor: pointer;
}
.tb-btn:hover  { color: var(--fg); background: #ffffff10; }
.tb-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* ---------- screen ---------- */

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--fs);
  line-height: var(--lh);
}

.scrollback {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: clamp(12px, 1.6vw, 16px) clamp(10px, 1.8vw, 22px) 8px;   /* Hyper: 16px 22px */
  scrollbar-width: thin;
  scrollbar-color: #45444a transparent;
}
.scrollback::-webkit-scrollbar { width: 9px; height: 9px; }
.scrollback::-webkit-scrollbar-thumb { background: #45444a; border-radius: 5px; }
.scrollback::-webkit-scrollbar-track { background: transparent; }

/* ---------- session banner ---------- */

.boot {
  position: relative;
  border: 1px solid var(--clay);
  border-radius: 3px;
  padding: 12px 4px 8px;
  margin: 4px 0 16px;
  min-width: 42ch;
}

.boot-legend {
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-50%);
  padding: 0 7px;
  background: var(--term-bg);
  color: var(--clay);
  white-space: nowrap;
}

.boot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
}

.boot-left {
  padding: 4px 16px;
  align-self: center;
  text-align: center;
}

.boot-right {
  padding: 4px 16px;
  border-left: 1px solid var(--clay);
}

.boot p { margin: 0 0 .45em; }
.boot hr { border: 0; border-top: 1px solid #ffffff12; margin: .9em 0; }

.boot-lead { color: var(--fg); }
.boot-h { font-size: 1em; font-weight: 700; color: var(--clay); margin: 0 0 .5em; }
.dim { color: var(--fg-dim); }
.fg  { color: var(--fg); }

.cmdrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmdrow code { color: var(--brightgreen); word-break: break-all; }

.copy {
  font: inherit;
  font-size: .92em;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  flex: none;
}
.copy:hover { color: var(--fg); border-color: var(--fg-dim); }
.copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.copy.done { color: var(--brightgreen); border-color: var(--brightgreen); }

.installbar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 1.4em;
  padding-bottom: .9em;
  border-bottom: 1px solid var(--line);
}
.installbar[hidden] { display: none; }
.installbar code { color: var(--brightgreen); word-break: break-all; }

/* ---------- one example, framed like Claude Code ---------- */

/* Captured lines carry their own inline colors and rely on column alignment,
   so they must never wrap or collapse whitespace. */
.cap-line {
  white-space: pre;
  min-height: calc(var(--lh) * 1em);
}

.note {
  color: var(--fg-dim);
  font-style: italic;
  margin: 0 0 1.2em;
  max-width: 78ch;
  white-space: normal;
}

.turn   { color: var(--fg); margin-bottom: .6em; white-space: pre-wrap; }

.callhdr { color: var(--fg); margin-bottom: .2em; white-space: pre-wrap; }
.callhdr .dot { color: var(--brightgreen); }

/* No gutter: the clear-line prefix each hook emits overwrites Claude Code's
   "says:" row, so hook output starts at column 0 like the terminal shows it. */
.hookblock { margin-top: .2em; }

/* The spinner row Claude Code prints while it is still working. */
.forging {
  margin: 1.4em 0 .2em;
  color: var(--clay);
  white-space: pre-wrap;
}
.forging[hidden] { display: none; }

/* ---------- composer + status ---------- */

.composer {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px clamp(10px, 1.8vw, 22px);
  border-top: 1px solid var(--line);
  min-height: 2.6em;
}
.composer .chev { color: var(--fg-dim); flex: none; }

/* cursorShape: 'LINE', cursorBlink: true */
.caret {
  flex: none;
  width: 2px;
  height: 1.15em;
  align-self: center;
  background: var(--cursor);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- chapters ---------- */

.chapters {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 7px clamp(10px, 1.8vw, 22px);
  border-top: 1px solid var(--line);
}

.chapters a {
  color: var(--fg-dim);
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.chapters a::before { content: "["; opacity: .5; margin-right: 2px; }
.chapters a::after  { content: "]"; opacity: .5; margin-left: 2px; }
.chapters a:hover { color: var(--fg); text-decoration: none; }
.chapters a.on { color: var(--clay); border-color: var(--clay); }
.chapters a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.hint {
  color: var(--fg-dim);
  opacity: 0;
  transition: opacity .25s ease;
  flex: 1;
  min-width: 0;
}
.hint.on { opacity: 1; animation: hintpulse 2.4s ease-in-out infinite; }
@keyframes hintpulse {
  from { opacity: .55; }
  50% { opacity: 1; }
  to { opacity: .55; }
}

.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.counter { color: var(--fg-dim); min-width: 6ch; text-align: center; }

.status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px clamp(10px, 1.6vw, 22px) 11px;
  border-top: 1px solid var(--line);
  font-size: .95em;
}

.meters { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meter { display: flex; align-items: center; gap: 10px; }
.bar { display: block; width: clamp(70px, 18vw, 210px); height: 2px; flex: none; border-radius: 2px; }
.bar-cyan    { background: var(--yellow); }   /* rate limit, as the real one reads */
.bar-magenta { background: var(--magenta); }

.statusmeta { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); }
.statusmeta .model  { color: var(--blue-br); }
.statusmeta .plugin { color: var(--fg-dim); text-decoration: underline; }

/* ---------- narrow ---------- */

@media (max-width: 760px) {
  .stage  { padding: 0; }
  .window { height: 100dvh; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .boot   { min-width: 0; }
  .boot-cols { grid-template-columns: minmax(0, 1fr); }
  .boot-right { border-left: 0; border-top: 1px solid var(--clay); margin-top: 10px; padding-top: 12px; }
  /* Only the branch and the window buttons survive; the tab text and the cwd
     are the first things Hyper itself drops when a window narrows. */
  .titlebar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .tab-title, .tab-cwd { display: none; }
}

@media (max-width: 1240px) {
  :root { --fs: clamp(9px, 1.16vw, 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .hint.on { animation: none; opacity: 1; }
  .beat { animation: none; }
  .caret { animation: none; }
}