* { box-sizing: border-box; }

/* The page is the app: the tabs over the editor and the preview, each pane
   scrolling on its own so both stay in view. */
html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  height: 100dvh;
  font: 14px/1.5 system-ui, sans-serif;
  color: #111;
}

/* The type buttons as a bar of bordered cells, the width of their words; the
   menu (Copy link) at its end. */
.tabs { display: flex; border-bottom: 1px solid #ddd; }

.tabs button {
  padding: 10px 16px;
  font: inherit;
  color: #666;
  background: none;
  border: 0;
  border-right: 1px solid #ddd;
  cursor: pointer;
}

.tabs button:hover { color: #111; }
.tabs button[aria-pressed='true'] { color: #111; font-weight: 600; background: #f2f2f2; }
.tabs .more { margin-left: auto; border-right: 0; border-left: 1px solid #ddd; font-size: 18px; line-height: 1; }

#menu {
  inset: auto;
  top: 46px;
  right: 8px;
  margin: 0;
  padding: 4px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

#menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: #111;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

#menu button:hover:enabled { background: #f2f2f2; }
#menu button:disabled { color: #aaa; cursor: default; }

/* Editor over preview, a line between; side by side once there is room. */
main {
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
  min-height: 0;
}

@media (min-width: 800px) {
  main { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

#editor {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px;
  /* 16px or more, or iOS Safari zooms in on focus. */
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  tab-size: 2;
  border: 0;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  outline: none;
  resize: none;
  overflow: auto;
}

@media (min-width: 800px) {
  #editor { border-bottom: 0; border-right: 1px solid #ddd; }
}

.preview { min-width: 0; overflow: auto; padding: 16px; }

#ask-type { margin: 0; color: #666; }

/* The element's own list numbers rows from under the first row; ours, by
   editor line, is the one shown. */
.preview ::part(problems) { display: none; }

#problems { margin: 12px 0 0; padding-left: 1.2em; color: #a40; }
#coordinates { margin: 12px 0 0; color: #666; }