/* Hero demo: the app playing by itself, and clickable (js/hero-demo.js runs it).
   In each room someone asks Bob for something, Bob asks pi in the terminal, the push lands in the chat.
   Colors follow the app's dark theme; sizes are in rem, so it scales with the page. */

.hero-demo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 16 / 10;
  background: #0d0f12;
  color: #e6e8eb;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  /* Taps don't flash: the controls show their own state */
  -webkit-tap-highlight-color: transparent;
}

.hd-titlebar,
.hd-roomhead,
.hd-term-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hd-titlebar {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #22262c;
  background: #15181d;
  font-size: 0.8125rem;
}

.hd-app { font-weight: 700; }

.hd-tb-btn {
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

/* The controls the visitor can use: the Terminal button and the terminal's ✕ */
.hd-tb-btn,
.hd-term-close {
  position: relative;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hd-term-close { padding: 0 0.25rem; border-radius: 0.3rem; }

/* While a room plays (js/hero-demo.js) its controls wait, looking as they do: no pointer, no hover */
.hero-demo button:disabled {
  color: inherit;
  cursor: default;
}

/* Only with a mouse: on phones a tapped button would stay lit */
@media (hover: hover) {
  .hd-tb-btn:enabled:hover,
  .hd-term-close:enabled:hover,
  button.hd-roomname:enabled:hover { background: #2b3a5c; }
  button.hd-room:enabled:not(.is-active):hover { background: #1a1e24; }
  button.hd-chip:enabled:hover,
  .hd-pop-act:enabled:hover { border-color: #4b535d; }
}

/* A bigger tap target than the button looks, for phones, where the demo is small */
.hd-tb-btn::after,
.hd-term-close::after {
  content: '';
  position: absolute;
  inset: -0.5rem;
}

.hd-spacer { flex: 1; }
.hd-faint { color: #8b949e; }

.hd-body {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-height: 0;
}

.hd-sidebar {
  padding: 0.875rem;
  border-right: 1px solid #22262c;
  background: #111317;
}

.hd-search {
  margin-bottom: 1rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: #1c1f24;
  color: #6b7280;
}

.hd-label {
  margin: 1rem 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b949e;
}

.hd-room {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}

.hd-room.is-active { background: #1f2a44; }

/* The rooms the visitor can switch between (in the sidebar, and in the room name's pop-up) */
button.hd-room {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.hd-room.is-active { background: #1f2a44; }

/* The @ before a DM shows presence, with the app's colors: online, away */
.hd-online { color: #22c55e; }
.hd-away { color: #eab308; }

.hd-main {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.hd-roomhead {
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid #22262c;
}

.hd-roomname { font-weight: 600; }

.hd-chip {
  padding: 0.125rem 0.625rem;
  border: 1px solid #30363d;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

button.hd-roomname,
button.hd-chip {
  background: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

button.hd-roomname {
  border: 0;
  padding: 0 0.25rem;
  border-radius: 0.375rem;
  font-size: inherit;
}

button.hd-chip[aria-expanded="true"] { border-color: var(--accent); }

/* The room bar's pop-ups: switch rooms, add a task, see the members */
.hd-pop {
  position: absolute;
  z-index: 3;
  top: 2.875rem;
  right: 1.25rem;
  display: grid;
  gap: 0.375rem;
  min-width: 13rem;
  padding: 0.625rem;
  border: 1px solid #30363d;
  border-radius: 0.6rem;
  background: #15181d;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  font-size: 0.875rem;
}

.hd-pop-rooms { right: auto; left: 1.25rem; gap: 0; }
.hd-pop-rooms .hd-label:first-child { margin-top: 0; }

.hd-pop-title { font-weight: 600; }

/* 16px keeps iPhones from zooming in on focus */
.hd-pop-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid #30363d;
  border-radius: 0.375rem;
  background: #0d0f12;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.hd-pop-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

.hd-pop-list { display: grid; gap: 0.25rem; }
.hd-pop-list li { display: flex; align-items: center; gap: 0.5rem; }
.hd-pop-list .hd-faint { margin-left: auto; font-size: 0.75rem; }

/* Repo: the form that connects a new repo, then "Repo connected" */
.hd-pop-repo { width: 17rem; }

.hd-repo-new,
.hd-repo-view { display: grid; gap: 0.375rem; }

.hd-field {
  display: grid;
  gap: 0.25rem;
  color: #8b949e;
  font-size: 0.8125rem;
}

.hd-repo-error { color: #ff7b72; font-size: 0.8125rem; }

.hd-pop-act {
  justify-self: start;
  padding: 0.25rem 0.875rem;
  border: 1px solid #30363d;
  border-radius: 0.375rem;
  background: #1f2a44;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hd-pop-act:disabled { opacity: 0.5; }

.hd-repo-name,
.hd-repo-branch {
  padding: 0 0.3em;
  border-radius: 0.25rem;
  background: #1f2a44;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* Without JS the pop-ups and the other rooms stay out of the way: [hidden] beats the displays above */
.hero-demo [hidden] { display: none; }

.hd-timeline {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem;
  overflow: hidden;
  padding: 1rem 1.25rem;
}

.hd-msg b { margin-right: 0.5rem; font-weight: 600; }

.n-matt { color: oklch(0.78 0.14 29); }
.n-alice { color: oklch(0.78 0.14 96); }
.n-bob { color: oklch(0.78 0.14 309); }
.n-richard { color: oklch(0.78 0.14 229); }

/* A push, as repo rooms show it: a card under the pusher's name */
.hd-push {
  max-width: 30rem;
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #30363d;
  border-left: 3px solid #4c6ef5;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* A task the visitor added, as the app shows it in the chat */
.hd-task {
  max-width: 30rem;
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #30363d;
  border-left: 3px solid #22c55e;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.hd-task-name { font-weight: 600; }

.hd-push code {
  padding: 0 0.3em;
  border-radius: 0.25rem;
  background: #1f2a44;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.hd-composer {
  margin: 0 1.25rem 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #2a2f36;
  border-radius: 0.75rem;
  background: #16191e;
  color: #6b7280;
}

/* The topic's terminal, floating over the timeline as in the app */
.hd-term {
  position: absolute;
  top: 3.75rem;
  right: 1.25rem;
  width: 52%;
  height: 58%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid #30363d;
  border-radius: 0.6rem;
  background: #0d1117;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}

.hd-term-bar {
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #30363d;
  background: #161b22;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.hd-pi {
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  font-family: serif;
  font-weight: 700;
  transition: background-color 0.2s;
}

.hd-term-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
  padding: 0.75rem 0.875rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 0.8125rem;
}

/* The prompt to pi: js/hero-demo.js types it, the caret shows until it is sent */
.hd-caret {
  display: none;
  width: 0.5em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: #e6e8eb;
}

.hd-ask.is-typing .hd-caret { display: inline-block; }

.hd-prompt { color: #7ee787; }
.hd-pi-mark { font-family: serif; font-weight: 700; color: #a5b4fc; }
.hd-dot { color: #a5b4fc; }
.hd-add { color: #7ee787; }
.hd-del { color: #ff7b72; }
.hd-ok { color: #7ee787; }
.hd-err { color: #ff7b72; }

/* The scripted cursor's click on Terminal flashes the button */
.hd-tb-btn.is-clicked { background: #2b3a5c; }

/* The scripted cursor the demos move around */
.hd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  pointer-events: none;
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 1l14 10-6 1-3 6z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / contain;
}

.hd-cursor.is-on { opacity: 1; }

/* Hidden until js/hero-demo.js shows them; without JS, everything shows.
   New messages take no room until they arrive, so the timeline grows upward as in the app. */
.js .hd-step:not(.is-on) { visibility: hidden; }
.js .hd-timeline .hd-step:not(.is-on) { display: none; }

/* Tablets and phones turned sideways: a narrower sidebar, and the terminal bar keeps its main buttons */
@media (max-width: 1023px) {
  .hd-body { grid-template-columns: 12rem 1fr; }
  .hd-term-bar > :nth-child(7),
  .hd-term-bar > :nth-child(8),
  .hd-term-bar > :nth-child(9) { display: none; }
}

/* Phones: no sidebar, a taller window, and the terminal across the chat */
@media (max-width: 760px) {
  /* minmax(0, 1fr): the window may shrink below its widest row on the smallest phones */
  .hero-demo { grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 5; font-size: 0.8125rem; }
  .hd-body, .hd-main { grid-template-columns: minmax(0, 1fr); }
  .hd-sidebar { display: none; }
  .hd-roomhead, .hd-timeline { padding-inline: 0.75rem; }
  .hd-composer { margin-inline: 0.75rem; }
  /* The room bar stays on one line: a long room name gives way to the chips */
  .hd-roomhead { gap: 0.5rem; white-space: nowrap; }
  .hd-roomname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hd-chip { flex-shrink: 0; }
  .hd-pop { right: 0.75rem; top: 2.5rem; }
  .hd-pop-rooms { left: 0.75rem; }

  .hd-term { top: 3rem; right: 0.5rem; left: 0.5rem; width: auto; height: 55%; }
  .hd-term-bar > :nth-child(7),
  .hd-term-bar > :nth-child(8),
  .hd-term-bar > :nth-child(9) { display: none; }
  /* The newest lines stay in view, as in a real terminal; the oldest scroll off the top */
  .hd-term-body { justify-content: flex-end; padding: 0.5rem 0.625rem; font-size: 0.6875rem; }
}

/* Phones under 360px (the first iPhone SE): the terminal bar drops the machine name */
@media (max-width: 359px) {
  .hd-term-bar > :nth-child(3) { display: none; }
}

/* Phones, with motion: the chat and the terminal take turns instead of sharing the window.
   The terminal fills it while pi works, and closes when the push lands in the chat */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hd-term { inset: 0.5rem; width: auto; height: auto; }
  .hd-term-body { font-size: 0.75rem; }
  /* Lines start at the top while they fit; once they don't, the newest stay in view */
  .hd-term-body::after { content: ''; flex: 1 1 0; }
  .hero-demo:has(.hd-timeline:not([hidden]) .is-on > .hd-push) .hd-term:not(.is-reopened) { visibility: hidden; }
}