/* pad.launch.ga — paper, editor, type scale, slash menu, saved indicator. */

:root {
  color-scheme: light dark;
  --paper: #f7f3ea;
  --ink: #2b2115;
  --muted: rgba(43, 33, 21, .52);
  --accent: #3a5ba0;
  --accent-soft: rgba(58, 91, 160, .14);
  --card: #fffdf6;
  --line: rgba(43, 33, 21, .14);
  --wash: rgba(43, 33, 21, .06);
  --danger: #a33;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #211d15;
    --ink: #e8e1cf;
    --muted: rgba(232, 225, 207, .5);
    --accent: #93b1e4;
    --accent-soft: rgba(147, 177, 228, .16);
    --card: #2a251b;
    --line: rgba(232, 225, 207, .16);
    --wash: rgba(232, 225, 207, .09);
    --danger: #e3908f;
  }
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html,
body {
  margin: 0;
  background: var(--paper);
}

.sheet {
  max-width: 72em;
  margin: 0 auto;
}

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

/* The page scrolls, not the editor: the editor grows with the note. */
.sheet .cm-editor {
  height: auto;
  background: transparent;
}

.sheet .cm-editor.cm-focused {
  outline: none;
}

.sheet .cm-scroller {
  overflow: visible;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

.sheet .cm-content {
  box-sizing: border-box;
  min-height: 100vh;
  padding: clamp(28px, 7vh, 72px) clamp(20px, 6vw, 56px);
  color: var(--ink);
  caret-color: var(--accent);
}

.sheet .cm-line {
  padding: 0;
}

.sheet .cm-placeholder {
  color: var(--muted);
}

::selection {
  background: var(--accent-soft);
}

body.mod .cm-content {
  cursor: pointer;
}

/* --- type scale ----------------------------------------------------------- */
/* The body size lives here; every heading and every inline code span is sized
   relative to it. The editor lays the text out itself, so unlike a mirrored
   highlight layer these sizes cannot drift away from the caret. */

.sheet .cm-content {
  font-size: clamp(19px, 1.2vw + 15px, 22px);
  line-height: 1.7;
}

.sheet .cm-line.cm-pad-h1 {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.25;
  padding: .6em 0 .1em;
  border-bottom: 1px solid var(--line);
}

.sheet .cm-line.cm-pad-h2 {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.3;
  padding-top: .8em;
}

.sheet .cm-line.cm-pad-h3 {
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.4;
  padding-top: .6em;
}

.sheet .cm-line.cm-pad-h4,
.sheet .cm-line.cm-pad-h5,
.sheet .cm-line.cm-pad-h6 {
  font-weight: 700;
  padding-top: .35em;
}

.sheet .cm-pad-strong {
  font-weight: 700;
}

.sheet .cm-pad-em {
  font-style: italic;
}

.sheet .cm-pad-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--wash);
  border-radius: 3px;
  padding: .08em .22em;
}

.sheet .cm-pad-strike {
  color: var(--muted);
  text-decoration: line-through;
}

.sheet .cm-pad-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: pointer;
}

/* The syntax itself stays visible, just quieter. */
.sheet .cm-pad-md {
  color: var(--muted);
}

/* --- slash menu and saved indicator --------------------------------------- */

.menu,
.palette {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  padding: 4px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: .9rem;
  z-index: 10;
}

.menu {
  min-width: 21em;
}

.menu [role="option"],
.palette [role="option"] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2em;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: default;
}

.menu .hint,
.palette .hint {
  color: var(--muted);
  white-space: nowrap;
}

.menu [aria-selected="true"],
.palette [aria-selected="true"] {
  background: var(--accent-soft);
}

/* --- the pad palette (Ctrl/⌘-K) ------------------------------------------- */

.palette {
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  width: min(38em, calc(100vw - 24px));
}

.palette [role="option"] > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette [role="option"].danger {
  color: var(--danger);
}

.palette-find {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
}

.palette-find::placeholder {
  color: var(--muted);
}

.palette-rows {
  max-height: min(50vh, 22em);
  overflow: auto;
}

/* The only place the palette's keys are written down: without it, deleting a pad
   is a gesture nobody can guess. */
.palette-keys {
  margin: 0;
  padding: 6px 10px 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85em;
}

.saved {
  position: fixed;
  right: 18px;
  bottom: 14px;
  margin: 0;
  font: italic 400 .78rem/1 "Source Serif 4", Georgia, serif;
  color: var(--muted);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.saved.show {
  opacity: 1;
}

.saved.error {
  color: var(--danger);
  opacity: 1;
}

@media print {
  .menu,
  .palette,
  .saved {
    display: none;
  }
}