.editor-view {
  min-height: 100vh;
}
.editor-bar {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 8px;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  z-index: 5;
}
.editor-bar .spacer { flex: 1; }
.editor-bar .meta {
  color: var(--muted);
  font-size: 13px;
}
.editor-bar .words {
  color: var(--muted);
  font-size: 13px;
}
.editor-page {
  width: min(760px, calc(100% - 32px));
  margin: 18px auto 80px;
}
.editor-title {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding: 12px 0 8px;
  outline: none;
}
.editor-title::placeholder { color: var(--editor-faint, #c4bbae); }
.editor-root { min-height: 60vh; }
.mantel-prose {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}
.mantel-prose .ProseMirror {
  outline: none;
  min-height: 55vh;
  padding-bottom: 30vh;
  caret-color: var(--accent-ink);
  contain: layout style;
}
/* A document caret is the focus cue; the page must never become a framed input. */
.write .mantel-prose .ProseMirror:focus-visible,
.write .mantel-prose .ProseMirror:focus,
.write .mantel-figure textarea:focus-visible {
  outline: none;
  box-shadow: none;
  border-radius: 0;
}
.writing-page .write { width: 100%; max-width: 840px; min-height: 100%; }
.mantel-prose .ProseMirror p.is-editor-empty:first-child::before,
.mantel-prose .ProseMirror p.is-empty:first-child::before {
  color: var(--editor-faint, #b3aa9d);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}
.mantel-prose h1,
.mantel-prose h2,
.mantel-prose h3 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 1.4em 0 0.4em;
}
.mantel-prose h1 { font-size: 1.8em; }
.mantel-prose h2 { font-size: 1.4em; }
.mantel-prose h3 { font-size: 1.18em; }
.mantel-prose p { margin: 0 0 0.9em; }
.mantel-prose ul, .mantel-prose ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.mantel-prose li { margin: 0.2em 0; }
.mantel-prose ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}
.mantel-prose ul[data-type="taskList"] li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.mantel-prose ul[data-type="taskList"] input { margin-top: 0.45em; }
.mantel-prose blockquote {
  margin: 0 0 0.9em;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.mantel-prose pre {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  overflow: auto;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0 0 1em;
}
.mantel-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--editor-soft, #efeae0);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}
.mantel-prose pre code { background: none; padding: 0; }
.mantel-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.6em 0;
}
.mantel-prose a { color: var(--accent-ink); }
.mantel-prose img {
  display: block;
  max-width: 100%;
  border-radius: 16px;
  margin: 0.4em auto 1em;
}
.mantel-prose iframe,
.mantel-prose div[data-youtube-video] iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 16px;
  margin: 0.4em 0 1em;
  background: #111;
}
.mantel-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 15px;
}
.mantel-prose th, .mantel-prose td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  background: var(--chip);
}
.mantel-prose th { background: var(--editor-soft, #efeae0); font-weight: 550; }
.mantel-prose .selectedCell { outline: 2px solid color-mix(in srgb, var(--accent) 50%, white); }
.mantel-prose u { text-decoration: underline; text-underline-offset: 3px; }
.mantel-prose mark { background: var(--editor-mark, #fde68a); border-radius: 3px; padding: 0 0.12em; }
.mantel-audio { display: block; width: 100%; margin: 0.4em 0 1em; }
.mantel-details {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 0 0 1em;
}
.mantel-details summary { cursor: pointer; font-weight: 550; }
.mantel-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--editor-soft, #efeae0);
  color: var(--muted);
}
.mantel-status--review { background: #e0f2fe; color: var(--accent-ink); }
.mantel-status--published, .mantel-status--live { background: #d1fae5; color: var(--live); }
.mantel-math { font-family: Georgia, "Iowan Old Style", serif; color: var(--accent-ink); }
.mantel-math--block {
  display: block;
  overflow-x: auto;
  padding: 12px;
  margin: 0 0 1em;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.mantel-prose img[data-align="left"] { margin-left: 0; }
.mantel-prose img[data-align="right"] { margin-right: 0; }
.mantel-canvas { margin: 0 0 1.25em; }
.mantel-canvas__card {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.mantel-canvas[data-selected] .mantel-canvas__card { outline: 2px solid var(--accent); outline-offset: 2px; }
.mantel-canvas__picture { flex: 1; min-height: 160px; background: var(--editor-soft, #f9fbfa); }
.mantel-canvas__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.mantel-canvas__bar button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--ink);
  color: white;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.mantel-slash {
  position: fixed;
  z-index: 40;
  width: 288px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 18px 40px -16px rgba(28, 25, 23, 0.2);
  overflow: hidden;
}
.mantel-slash[hidden], .mantel-bubble[hidden], .mantel-emoji[hidden], .mantel-link[hidden],
.mantel-media[hidden], .mantel-find[hidden], .mantel-math-edit[hidden], .mantel-more[hidden] { display: none !important; }
.mantel-slash__list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  position: relative;
}
.mantel-slash__group {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 10px 5px;
}
.mantel-slash__highlight {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: 10px;
  background: var(--editor-hover, #e7f6f9);
  pointer-events: none;
  transition: transform 0.16s ease, height 0.16s ease;
}
.mantel-slash__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.mantel-slash__item svg { flex: none; color: var(--muted); }
.mantel-slash__item span { flex: 1; }
.mantel-slash__item kbd {
  color: var(--muted);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--editor-soft, #efeae0);
  border-radius: 6px;
  padding: 1px 6px;
}
.mantel-slash__empty {
  color: var(--muted);
  font-size: 13px;
  padding: 16px 12px;
}

.mantel-bubble, .mantel-link {
  position: fixed;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 28px -12px rgba(28, 25, 23, 0.28);
}
.mantel-bubble button, .mantel-link button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mantel-bubble button[data-active="1"],
.mantel-bubble button:hover,
.mantel-link button:hover {
  background: var(--editor-hover, #e7f6f9);
  color: var(--accent-ink);
}
.mantel-bubble .sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 3px;
}
.mantel-bubble select {
  border: 0;
  background: var(--editor-soft, #efeae0);
  color: var(--ink);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
}
.mantel-bubble__size {
  min-width: 36px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.mantel-link, .mantel-media, .mantel-find, .mantel-math-edit {
  position: fixed;
  z-index: 45;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 28px -12px rgba(28, 25, 23, 0.28);
}
.mantel-link input, .mantel-media input, .mantel-find input, .mantel-math-edit textarea {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  width: 220px;
  outline: none;
  padding: 4px 8px;
}
.mantel-math-edit textarea { width: 280px; resize: vertical; }
.mantel-media { flex-direction: column; align-items: stretch; min-width: 280px; }
.mantel-media__row { display: flex; gap: 8px; }
.mantel-more {
  position: fixed;
  z-index: 47;
  width: 240px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px -16px rgba(28, 25, 23, 0.2);
}
.mantel-more__label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 4px 4px;
}
.mantel-more__row { display: flex; gap: 4px; padding-top: 8px; }
.mantel-more__row button {
  appearance: none; border: 0; background: var(--editor-soft, #efeae0); color: var(--ink);
  border-radius: 8px; min-width: 28px; height: 28px; cursor: pointer; font: inherit; font-size: 12px;
}
.mantel-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; }
.mantel-swatches button {
  width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line);
  padding: 0; cursor: pointer;
}

.mantel-emoji {
  position: fixed;
  z-index: 46;
  width: 272px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  box-shadow: 0 18px 40px -16px rgba(28, 25, 23, 0.2);
}
.mantel-emoji button {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
}
.mantel-emoji button:hover { background: var(--editor-hover, #e7f6f9); }

.rows tr { cursor: pointer; }
.rows tr:hover td { background: var(--editor-hover, #faf7f1); }
.table-wrap .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 8px;
}
.fallback {
  width: 100%;
  min-height: 55vh;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--chip);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  padding: 16px;
  resize: vertical;
}
@media (max-width: 720px) {
  .editor-bar { flex-wrap: wrap; }
  .editor-bar .meta { width: 100%; order: 3; }
}

/* Writing chrome adapted from WriterPro: quiet until it is useful. */
.mantel-writing-tools { display:flex; align-items:center; gap:4px; margin:0 0 24px; padding:6px 0; border-bottom:1px solid var(--line); color:var(--muted); font:12px/1.4 system-ui; }
.mantel-writing-tools .spacer { flex:1; }
.mantel-writing-tools button { border:0; background:transparent; color:inherit; padding:7px 9px; border-radius:7px; cursor:pointer; min-height:34px; }
.mantel-writing-tools button:hover, .mantel-writing-tools button[aria-pressed="true"] { background:var(--editor-hover); color:var(--accent-ink); }
.mantel-outline,.mantel-image-details { position:fixed; z-index:60; background:var(--bg-elev); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); padding:12px; width:min(320px,calc(100vw - 24px)); max-height:65vh; overflow:auto; font:13px/1.5 system-ui; }
.mantel-outline strong,.mantel-image-details strong { display:block; margin:4px 8px 10px; }
.mantel-outline button { display:block; width:100%; padding:9px 12px; text-align:left; border:0; background:transparent; color:inherit; border-radius:6px; }
.mantel-outline button:hover { background:var(--editor-hover); }
.mantel-image-details label { display:block; margin:10px 0; }
.mantel-image-details input[type="text"] { display:block; width:100%; box-sizing:border-box; background:var(--bg-input); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:9px; margin-top:5px; }
.mantel-image-details .check { display:flex; gap:8px; }
.mantel-image-details button { padding:8px 12px; border:0; border-radius:6px; background:var(--brand); color:white; }
.mantel-figure { max-width:100%; margin:1.1em auto; }
.mantel-figure[data-align="left"] { margin-left:0; margin-right:auto; }
.mantel-figure[data-align="right"] { margin-left:auto; margin-right:0; }
.mantel-figure img { width:100%; height:auto; margin:0; }
.mantel-figure textarea { display:block; text-align:center; width:100%; border:0; background:transparent; color:var(--muted); padding:10px 4px; font:13px/1.5 system-ui; }
.mantel-figure.ProseMirror-selectednode { outline:2px solid var(--brand); border-radius:12px; }
.mantel-focus-dim { opacity:.38; transition:opacity .15s; }
.mantel-focus-mode .sidebar { display:none; }
.mantel-focus-mode .write { max-width:820px; padding-top:10vh; padding-bottom:55vh; }
.mantel-focus-mode .write .piece-title { font-size:38px; }
.mantel-find { max-width:calc(100vw - 24px); flex-wrap:wrap; }
.mantel-find [data-find-count] { font-size:12px; color:var(--muted); min-width:65px; align-self:center; }
.mantel-bubble button:focus-visible,.mantel-writing-tools button:focus-visible,.mantel-outline button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (max-width:600px) { .mantel-writing-tools { gap:0; } .mantel-writing-tools button { min-height:40px; padding:7px; } .mantel-focus-mode .write { padding:24px 20px 55vh; } .mantel-focus-mode .write .piece-title { font-size:30px; } }
@media (prefers-reduced-motion:reduce) { .mantel-focus-dim { transition:none; } }

.mantel-focus-mode .app { grid-template-columns:minmax(0,1fr); }
.mantel-figure textarea[hidden], .mantel-outline[hidden], .mantel-image-details[hidden] { display:none !important; }

.mantel-figure textarea { field-sizing:content; resize:none; overflow:hidden; min-height:40px; box-sizing:border-box; }

@font-face {
  font-family: "Paper Mono";
  src: url("/studio/paper-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.write .piece-title,
.write .mantel-prose,
.write .mantel-prose h1,
.write .mantel-prose h2,
.write .mantel-prose h3,
.write .mantel-prose code,
.write .mantel-prose pre,
.write .mantel-figure textarea,
.write .fallback {
  font-family: "Paper Mono", monospace;
}
.write .mantel-prose h1, .write .mantel-prose h2, .write .mantel-prose h3 { letter-spacing: -.025em; font-weight: 600; }
.write .piece-title { font-weight: 600; }
.writing-page .write { padding-top: 24px; padding-bottom: 45vh; }
.writing-page #editor-slot .mantel-prose { font-size: inherit; }
.mantel-image-details input[type="number"], .mantel-image-details select { display:block; width:100%; padding:9px; margin-top:5px; background:var(--bg-input); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
@media (max-width:600px) { .writing-page .write { padding-top:32px; } }
.writing-page .write .piece-title { font-family: "Paper Mono", monospace; }
.writing-page .mantel-figure.ProseMirror-selectednode { outline:none; }