/* Shared by the public reader and the editor so a story looks the same in both.
   Layered on top of Quill's snow stylesheet (list markers, alignment, indents). */

/* Calibri is the house reading font. Carlito (metric-compatible) and Tinos/Caladea are
   loaded from Google Fonts by the pages, so phones and Linux machines without the
   Microsoft fonts still get the same shapes and line breaks. */
:root {
  --reading-font: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.story-body { --story-text: #e7e9ea; --story-line: #2f3336; }

.story-body.ql-container,
.story-body.ql-snow { border: 0 !important; font-size: inherit; }

.story-body .ql-editor {
  padding: 0;
  height: auto;
  overflow: visible;
  color: var(--story-text);
  font-family: var(--reading-font);
  font-size: 19px;
  line-height: 1.7;
  tab-size: 4;
}
.story-body .ql-editor.ql-blank::before {
  left: 0; right: 0; color: #71767b; font-style: italic;
}

.story-body .ql-editor p,
.story-body .ql-editor ol,
.story-body .ql-editor ul,
.story-body .ql-editor blockquote { margin: 0 0 1em; }
.story-body .ql-editor h1,
.story-body .ql-editor h2,
.story-body .ql-editor h3 { margin: 1.4em 0 .5em; line-height: 1.25; font-weight: 700; }
.story-body .ql-editor h1 { font-size: 1.9em; }
.story-body .ql-editor h2 { font-size: 1.5em; }
.story-body .ql-editor h3 { font-size: 1.2em; }
.story-body .ql-editor li { margin-bottom: .25em; }
.story-body .ql-editor a { color: #8ab4ff; }
.story-body .ql-editor blockquote {
  border-left: 3px solid #8ab4ff; padding-left: 1em; color: #b7bcc0; font-style: italic;
}
/* quote styles (the "Quote style" picker in the editor). Each line of a quote is its own
   <blockquote>, so consecutive lines of the same style are joined into one block. */
.story-body .ql-editor blockquote.ql-quote-center {
  border-left: 0; margin: 1.4em 0; padding: 1.1em 1.5em; text-align: center; color: var(--story-text);
  border-top: 1px solid var(--story-line); border-bottom: 1px solid var(--story-line);
}
.story-body .ql-editor blockquote.ql-quote-center:has(+ blockquote.ql-quote-center) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.story-body .ql-editor blockquote.ql-quote-center + blockquote.ql-quote-center { border-top: 0; padding-top: .35em; margin-top: 0; }

.story-body .ql-editor blockquote.ql-quote-pull {
  border-left: 0; margin: 1.6em 0; padding: 0 1.2em; text-align: center; color: #dfe8ff;
  font-family: Georgia, "Times New Roman", serif; font-size: 1.35em; line-height: 1.45;
}
.story-body .ql-editor blockquote.ql-quote-pull::before {
  content: "\201C"; display: block; height: .55em; margin-bottom: .15em;
  font-size: 2.6em; line-height: 1; font-style: normal; color: #8ab4ff;
}
.story-body .ql-editor blockquote.ql-quote-pull:has(+ blockquote.ql-quote-pull) { margin-bottom: 0; }
.story-body .ql-editor blockquote.ql-quote-pull + blockquote.ql-quote-pull { margin-top: .4em; }
.story-body .ql-editor blockquote.ql-quote-pull + blockquote.ql-quote-pull::before { content: none; }

.story-body .ql-editor blockquote.ql-quote-indent {
  border-left: 0; padding: 0 2em; font-style: normal; color: var(--story-text);
}
.story-body .ql-editor blockquote.ql-quote-indent:has(+ blockquote.ql-quote-indent) { margin-bottom: .5em; }

.story-body .ql-editor pre.ql-syntax {
  background: #16181c; color: #e7e9ea; border: 1px solid var(--story-line);
  border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 15px; margin: 0 0 1em;
}
.story-body .ql-editor code { background: #16181c; border-radius: 4px; padding: 1px 5px; font-size: .9em; }
.story-body .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; }
.story-body .ql-editor hr {
  border: 0; text-align: center; height: 2em; margin: 1.2em 0; overflow: visible;
}
.story-body .ql-editor hr::before {
  content: "\2726  \2726  \2726"; color: #71767b; letter-spacing: .5em; font-size: 14px;
}

/* interactives (shared/editor.js places them, shared/embeds.js makes them live). While writing,
   and anywhere the live version can't be shown, the marker is a labelled box. */
.story-body .ql-editor .atk-embed {
  display: grid; place-items: center; min-height: 120px; margin: 0 0 1em; padding: 18px;
  border: 2px dashed var(--story-line, rgba(128, 128, 128, .5)); border-radius: 10px;
  background: rgba(128, 128, 128, .08); text-align: center; font-size: 15px; cursor: pointer; user-select: none;
}
.story-body .ql-editor .atk-embed::before { content: "\25CE  Interactive: " attr(data-title); font-weight: 700; }
.story-body .ql-editor .atk-embed::after { content: "Readers see it live here. Click to change it."; display: block; margin-top: 4px; font-size: 13px; opacity: .7; }
.story-body .ql-editor figure.atk-interactive { margin: 0 0 1.2em; }
.story-body .ql-editor figure.atk-interactive iframe {
  display: block; width: 100%; border: 1px solid var(--story-line, rgba(128, 128, 128, .5)); border-radius: 10px; background: #e9cb77;
}
.story-body .ql-editor figure.atk-interactive figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 6px; font-size: 14px; opacity: .85;
}
.story-body .ql-editor figure.atk-interactive .atk-full {
  font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: 999px;
  padding: 1px 10px; cursor: pointer; white-space: nowrap; opacity: .85;
}
.story-body .ql-editor figure.atk-interactive .atk-full:hover { opacity: 1; }
.story-body .ql-editor figure.atk-interactive iframe:fullscreen { height: 100% !important; border: 0; border-radius: 0; }

/* fonts (names must match the whitelist in write/write.js; no class = Calibri) */
.ql-font-calibri-light { font-family: "Calibri Light", Calibri, Carlito, "Segoe UI", sans-serif; }
.ql-font-times     { font-family: "Times New Roman", Tinos, "Liberation Serif", Times, serif; }
.ql-font-cambria   { font-family: Cambria, Caladea, Georgia, serif; }
.ql-font-sans      { font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.ql-font-serif     { font-family: Georgia, "Times New Roman", serif; }
.ql-font-palatino  { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; }
.ql-font-garamond  { font-family: Garamond, "EB Garamond", "Palatino Linotype", serif; }
.ql-font-monospace { font-family: "Courier New", Courier, monospace; }
.ql-font-cursive   { font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive; }