/* Customize demo: a scripted recording of a team changing Zigzag's own code (js/customize-demo.js plays it),
   which the visitor can then edit and commit.
   Half UI, half code: on the left the app, on the right the team's copy of the push card's source.
   A line is typed into the code, Zigzag rebuilds, and the push card on the left gets the new button.
   Colors follow the app's dark theme; sizes are in rem, so it scales with the page. */

.cz-demo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 62.5rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #0d0f12;
  color: #e6e8eb;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
}

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

/* ---- The app ---- */

.cz-app {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  min-height: 0;
}

.cz-titlebar,
.cz-roomhead,
.cz-tabs,
.cz-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.cz-titlebar,
.cz-tabs {
  height: 2.375rem;
  padding: 0 1rem;
  border-bottom: 1px solid #22262c;
  background: #15181d;
  font-size: 0.8125rem;
}

/* The titlebar's Team UI button, naming the team's folder, as in the app */
.cz-team {
  padding: 0.0625rem 0.5rem;
  border: 1px solid #30363d;
  border-radius: 0.375rem;
}

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

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

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

/* The visitor's controls, once the demo has played: the room bar's chips and the editor's Commit */
button.cz-chip {
  background: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* While it plays they wait, looking as they do: no pointer, no hover */
.cz-demo button:disabled { cursor: default; color: inherit; }

.cz-commit {
  padding: 0.0625rem 0.625rem;
  border: 1px solid #2ea043;
  border-radius: 0.375rem;
  background: #238636;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cz-demo .cz-commit:disabled { opacity: 0.45; color: #fff; }

@media (hover: hover) {
  button.cz-chip:enabled:hover { border-color: #4b535d; }
  .cz-commit:enabled:hover { background: #2ea043; }
}

/* The pop-ups (the hero demo's .hd-pop), under the room bar and under the editor's tabs */
.cz-app .hd-pop { top: 5.25rem; }
.cz-editor .hd-pop { top: 2.625rem; right: 0.75rem; }
.cz-demo [hidden] { display: none; }

.cz-pop-repo { width: 19rem; }

.cz-pop-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b949e;
}

.cz-history { display: grid; gap: 0.5rem; font-size: 0.8125rem; }

.cz-history li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  overflow-wrap: anywhere;
}

.cz-history code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: #8b949e;
}

.cz-history .cz-faint { grid-column: 2; font-size: 0.75rem; }

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

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

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

/* A push, as repo rooms show it: a card under the pusher's name */
.cz-push {
  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;
}

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

/* The team's button, once their code is in */
.cz-deploy {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.125rem 0.75rem;
  border-radius: 0.375rem;
  background: #238636;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.cz-deploy.is-on { animation: cz-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.cz-deploy.is-clicked { background: #1a6b2b; }

@keyframes cz-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

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

/* ---- The code ---- */

/* minmax(0, 1fr): the editor's width is the demo's, whatever the tabs' row holds */
.cz-editor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid #30363d;
  background: #0a0c0f;
}

.cz-tab {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-bottom: -1px;
  padding: 0 0.875rem;
  border-inline: 1px solid #22262c;
  border-top: 2px solid #4c6ef5;
  background: #0a0c0f;
}

.cz-tabs { gap: 0.875rem; padding-left: 0.5rem; }
.cz-path { overflow: hidden; text-overflow: ellipsis; }

.cz-code {
  counter-reset: line;
  overflow: hidden;
  padding: 1rem 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.75;
  color: #abb2bf;
}

/* Long lines wrap under themselves, past the line numbers' gutter: the visitor's lines can be any length */
.cz-line {
  position: relative;
  min-height: 1.75em;
  padding-left: 3.25rem;
  padding-right: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Line numbers count only the lines that are there, so they shift when the new line comes in */
.cz-line::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 0;
  width: 2.25rem;
  padding-right: 0.25rem;
  text-align: right;
  color: #4b5260;
}

/* Once the demo has played, the code is the visitor's (js/customize-demo.js): the textarea lies over
   the lines with its text invisible, taking the keys and drawing the caret, while the lines show the
   text in color. The script sizes it to the code and scales it down from 16px, the size phones type
   at without zooming in */
.cz-edit {
  position: absolute;
  margin: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: auto;
  scrollbar-width: none;
  background: transparent;
  color: transparent;
  caret-color: #e6e8eb;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 16px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transform-origin: 0 0;
  cursor: text;
}

.cz-edit::selection { background: rgb(76 110 245 / 0.35); }

.cz-editor:has(.cz-edit:focus-visible) .cz-code { box-shadow: inset 0 0 0 1px #4c6ef5; }

/* The line the team adds, marked like an editor marks a change */
.cz-line.is-new {
  background: rgb(46 160 67 / 0.14);
  box-shadow: inset 3px 0 #2ea043;
}

.cz-k { color: #c678dd; }
.cz-s { color: #98c379; }
.cz-f { color: #61afef; }
.cz-t { color: #e5c07b; }
.cz-g { color: #e06c75; }
.cz-a { color: #d19a66; }

.cz-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.2em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: #e6e8eb;
  animation: cz-blink 1s steps(1) infinite;
}

@keyframes cz-blink { 50% { opacity: 0; } }

.cz-status {
  height: 1.75rem;
  padding: 0 1rem;
  border-top: 1px solid #22262c;
  background: #15181d;
  font-size: 0.75rem;
  color: #8b949e;
}

.cz-busy { color: #eab308; }
.cz-done { color: #7ee787; }

/* The visitor's file against its last commit */
.cz-git.is-dirty { color: #eab308; }
.cz-git.is-clean { color: #7ee787; }

/* Hidden until js/customize-demo.js reaches its time; without JS, everything shows. */
.js .cz-demo [data-at]:not(.is-on) { display: none; }

/* Tablets and phones turned sideways: half UI on top, half code below */
@media (max-width: 1023px) {
  .cz-demo { grid-template-columns: 1fr; aspect-ratio: auto; }
  .cz-app { height: 24rem; }
  .cz-editor { border-left: 0; border-top: 1px solid #30363d; }
}

/* Phones: half UI on top, half code below, with a narrower gutter */
@media (max-width: 760px) {
  .cz-demo { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; font-size: 0.8125rem; }
  .cz-app { height: 21rem; }
  .cz-app, .cz-editor { grid-template-columns: minmax(0, 1fr); }
  .cz-editor { border-left: 0; border-top: 1px solid #30363d; }
  .cz-path { display: none; }
  .cz-roomhead, .cz-timeline { padding-inline: 0.75rem; }
  .cz-composer { margin-inline: 0.75rem; }

  .cz-code { padding: 0.75rem 0; font-size: 0.6875rem; }
  .cz-line { padding-left: 2.25rem; }
  .cz-line::before { width: 1.5rem; }
  .cz-app .hd-pop { top: 4.875rem; right: 0.75rem; }
}

/* Phones under 360px (the first iPhone SE): the title bar drops the user's name */
@media (max-width: 359px) {
  .cz-titlebar > :last-child { display: none; }
}