/* The playground: code on the left, the page it makes on the right.
 *
 * The colours are not here. They are in ../shared/theme.css, which is the study
 * vault's palette, because this page is also served inside that vault in an
 * iframe on every chapter page and the two are meant to look like one thing.
 * What is here is the layout, and it is written against those tokens.
 *
 * Anything under :root[data-embedded] is the iframe case. theme.js sets that
 * attribute when the page is in a frame, and it comes down to two differences:
 * the page has a title above it already, and its height is the frame's height
 * rather than the screen's, so nothing in that branch may use vh. */

:root {
  --split: 44%;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a {
  color: var(--accent);
}

/* ---------- the bar across the top ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.bar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.bar h1 span {
  color: var(--faint);
  font-weight: 400;
}

.spacer {
  flex: 1;
}

/* :not(.theme-toggle) because the light/dark button in ../shared/theme.css is
   also a button in this bar, and it is a 30px circle with an icon in it rather
   than a pill with a word in it. Without this the padding here squeezes its
   icon to four pixels wide. */
select,
.bar button:not(.theme-toggle),
.bar a.chip {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--dim);
  background: var(--surfaceUp);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
}

select {
  border-radius: 8px;
  color: var(--ink);
  max-width: 62vw;
}

.bar button:not(.theme-toggle):hover,
.bar a.chip:hover {
  color: var(--ink);
  border-color: var(--faint);
}

.saved {
  color: var(--faint);
  font-size: 12px;
  font-family: var(--mono);
  min-width: 7ch;
}

/* the name of the lecture that is open, next to the picker */
.now {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Wide enough for "08 · css grid · 3. fr, sharing what is left", which is
     what a ?s= link puts here: the picker cannot show a part, so this is the
     only thing telling the reader where they landed. */
  max-width: 46ch;
}

select optgroup {
  color: var(--dim);
  font-style: normal;
  background: var(--bg);
}

select option {
  color: var(--ink);
  background: var(--surface);
}

/* ---------- the two halves ---------- */

.split {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.code {
  width: var(--split);
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.view {
  flex: 1;
  background: var(--bg);
  padding: 12px;
}

.view iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  /* White in both themes on purpose. This is the page u are writing, and a page
     u write is white until u say otherwise. Tinting it would be this stylesheet
     lying about what ur css does. */
  background: #fff;
  display: block;
}

/* ---------- the divider u drag ---------- */

.divider {
  flex: none;
  width: 9px;
  cursor: col-resize;
  background: var(--bg);
  position: relative;
}

.divider::after {
  content: "";
  position: absolute;
  inset: 0 4px;
  background: var(--line);
}

.divider:hover::after,
body.dragging .divider::after {
  background: var(--accent);
}

body.dragging {
  user-select: none;
}

body.dragging iframe {
  pointer-events: none;
}

/* ---------- the editor ---------- */

.tabs {
  display: flex;
  gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.tabs button {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px;
  cursor: pointer;
}

.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.editors {
  flex: 1;
  min-height: 0;
  position: relative;
}

.editor {
  position: absolute;
  inset: 0;
  display: flex;
}

.editor[hidden] {
  display: none;
}

.gutter {
  flex: none;
  width: 44px;
  padding: 12px 8px 12px 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--faint);
  background: var(--bg);
  overflow: hidden;
  user-select: none;
  white-space: pre;
}

/* The colours and the text u type are two layers, one exactly on top of the
   other: a <pre> painted by highlight.js underneath, and the real textarea on
   top with its text turned transparent. That is the only way to colour code in
   a textarea and keep the caret, the selection, undo and every other editing
   behaviour that a textarea gets for free.
   
   The two rules below therefore have to agree on font, size, line height,
   padding, tab size and wrapping, character for character. Change one and the
   colours slide out from under the text as u scroll. */
.input {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--surface);
}

.hl,
.editor textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

.hl {
  color: var(--ink);
  /* scrolled from javascript to follow the textarea, never by the reader */
  overflow: hidden;
  pointer-events: none;
}

.editor textarea {
  outline: none;
  resize: none;
  overflow: auto;
  background: transparent;
  /* the text is drawn by the layer underneath. only the caret is ours. */
  color: transparent;
  caret-color: var(--ink);
}

/* Half transparent on purpose: an opaque selection would paint over the
   coloured layer and the selected code would vanish while u dragged across it. */
.editor textarea::selection {
  background: var(--selection);
}

.hint {
  flex: none;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--dim);
  font-size: 12.5px;
}

.hint::before {
  content: "try: ";
  color: var(--faint);
  font-family: var(--mono);
}

/* ---------- narrow: stack it, code on top ---------- */

@media (max-width: 820px) {
  body {
    overflow: auto;
  }
  .split {
    display: block;
  }
  .code,
  .view {
    width: auto;
    height: 62vh;
  }
  .code {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .divider {
    display: none;
  }
  .gutter {
    display: none;
  }
}

/* ---------- embedded in the vault ---------- */

/* The card around us carries the chapter name, so the bar saying "Interactive
   HTML & CSS" underneath it is the same words twice. */
:root[data-embedded] .bar h1 {
  display: none;
}

:root[data-embedded] .bar {
  padding: 8px 12px;
  gap: 10px;
}

/* Two panes for longer, because the frame is narrower than a window at the same
   zoom and stacking at 820px would stack it on a desktop. */
@media (max-width: 820px) {
  :root[data-embedded] .split {
    display: flex;
  }
  :root[data-embedded] .code {
    width: var(--split);
    height: auto;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  :root[data-embedded] .view {
    height: auto;
  }
  :root[data-embedded] .divider,
  :root[data-embedded] .gutter {
    display: block;
  }
}

/* Under 700 it does stack, because two panes in 600px is 260px of editor and
   that is not somewhere u can write. It stacks on percentages of the frame,
   not vh: vh here is a percentage of the whole window, and would push the
   preview out the bottom of an iframe that is half the window tall. */
@media (max-width: 700px) {
  :root[data-embedded] body {
    overflow: hidden;
  }
  :root[data-embedded] .split {
    display: flex;
    flex-direction: column;
  }
  :root[data-embedded] .code {
    width: auto;
    height: 55%;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  :root[data-embedded] .view {
    height: auto;
    flex: 1;
  }
  :root[data-embedded] .divider,
  :root[data-embedded] .gutter {
    display: none;
  }
}