/* editor.css — the editor's own screen (top bar, panels). Not part of the book; the book's looks are in settings.css. */

html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font: 14px/1.4 system-ui, sans-serif; background: #e8e6e1; color: #222; }

#bar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #ccc; }
#bar > * { flex: none; }
#bar .grow { flex: 1; }
/* the bar keeps one height: only the status gives way — one line, cut short if it has to (full text on hover). (A
   longer message used to squeeze the buttons onto two lines, which moved the text editor down a line under the mouse.) */
#bar #status { color: #555; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bar #status.error { color: #b00; }
#bar a { color: #555; }
#bar select { font: inherit; padding: 2px 4px; }
button { font: inherit; padding: 4px 14px; cursor: pointer; }

#app { flex: 1; display: flex; min-height: 0; }
#app[hidden] { display: none; }
#panel { width: 470px; flex: none; display: flex; flex-direction: column; background: #fafaf8; border-right: 1px solid #ccc; min-height: 0; }
#tabs { display: flex; border-bottom: 1px solid #ccc; }
#tabs button { flex: 1; border: 0; border-bottom: 3px solid transparent; background: none; padding: 8px; font-weight: 600; color: #666; }
#tabs button.on { border-bottom-color: #8a5a00; color: #222; }
#panel .tab { flex: 1; overflow: auto; padding: 8px 12px 24px; min-height: 0; }
#panel .tab[hidden] { display: none; }

/* Text tab */
#tab-text { display: flex; flex-direction: column; gap: 6px; }
#tab-text[hidden] { display: none; }
#tab-text .row { display: flex; align-items: center; gap: 8px; }
#tab-text .grow { flex: 1; }
#tab-text .row button { white-space: nowrap; padding: 3px 10px; }
#cm { flex: 1; min-height: 0; border: 1px solid #ccc; }
#tab-text .hint { margin: 0; }
/* a chapter's title bar inside the text (drawn over its header line, which can't be edited) */
/* (padding outside the bar, never margins: CodeMirror doesn't count a block widget's margins, so clicks and ↑/↓ would
   land a line or two off below it) */
.cm-chapter-head { padding: 14px 0 4px; }
.cm-chapter-head .bar { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; background: #efe7d6;
  border-top: 2px solid #8a5a00; font: 600 13px/1.3 system-ui, sans-serif; color: #3a2a00; }
.cm-content > .cm-chapter-head:first-child { padding-top: 0; }
.cm-chapter-head .t { flex: 1; min-width: 0; }
.cm-chapter-head .f { font-weight: 400; color: #8a7a5a; font-size: 12px; }

/* changed lines: a dot left of the line number (click: back to the original; hollow dot: click to redo) */
.cm-changes .cm-gutterElement { padding: 0 1px 0 3px; display: flex; align-items: center; }
.cm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
.cm-dot-changed { background: #e08a00; }
.cm-dot-removed { background: #c62828; }
.cm-dot-ghost { border: 1.5px solid #b0a58c; }
.cm-dot:hover { box-shadow: 0 0 0 3px rgba(224, 138, 0, .3); }

/* Contents list (left): the chapters of the booklet; the place you're at is marked */
#toc-nav { width: 220px; flex: none; display: flex; flex-direction: column; overflow: hidden; background: #f3f1ec; border-right: 1px solid #ccc; font-size: 13px; }
#toc-list { flex: 1; overflow: auto; padding: 0 0 24px; }
#feedback-btn { flex: none; margin: 6px; border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 6px; font-size: 13px; }
#feedback-btn.on { background: #fff0c2; border-color: #8a5a00; }
#feedback-panel:not([hidden]) { display: flex; flex-direction: column; }
#feedback-text { flex: 1; min-height: 200px; width: 100%; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; padding: 8px; margin-bottom: 8px; resize: none; }
#toc-nav .nav-top { position: sticky; top: 0; background: #f3f1ec; padding: 9px 12px 7px; font-weight: 700; border-bottom: 1px solid #ddd; }
#toc-nav a { display: block; padding: 3px 10px 3px 12px; color: #333; text-decoration: none; border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; scroll-margin: 40px 0 12px; }
#toc-nav a:hover { background: #e9e4d8; }
#toc-nav a.nav-l0 { padding-top: 5px; padding-bottom: 5px; }
#toc-nav a.here { background: #fff0c2; border-left-color: #8a5a00; color: #000; }
#toc-nav a .tag { margin-left: 6px; }
#toc-nav a { position: relative; padding-right: 26px; }
#toc-nav a .rename { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 0 4px;
  font-size: 13px; color: #8a5a00; opacity: 0; }
#toc-nav a:hover .rename, #toc-nav a .rename:focus { opacity: 1; }

/* Chapters tab */
#tab-book h3 { margin: 8px 0; font-size: 15px; }
#chapters { padding-left: 24px; margin: 0 0 16px; }
#chapters li { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid #eee; }
#chapters li .title { flex: 1; min-width: 0; }
#chapters li.missing .title { color: #b00; }
.tag { font-size: 11px; background: #fff0c2; color: #7a5200; border-radius: 8px; padding: 0 6px; }
#chapters li button { padding: 1px 7px; font-size: 13px; }
#tab-book .add { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; }
#tab-book .add .row { display: flex; gap: 6px; margin-top: 4px; }
#tab-book .add select { flex: 1; min-width: 0; font: inherit; }

/* Settings, Print, Feedback: drawers over the left side (the pages stay in view, to see each change) */
#app { position: relative; }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 500px; max-width: 100%; z-index: 20; overflow: auto; box-sizing: border-box;
  background: #fafaf8; border-right: 1px solid #bbb; box-shadow: 4px 0 16px rgba(0,0,0,.18); padding: 0 14px 24px; }
.drawer[hidden] { display: none; }
.drawer .drawer-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  background: #fafaf8; padding: 10px 0 8px; border-bottom: 1px solid #ddd; font-size: 15px; }
.drawer .drawer-head button { border: 0; background: none; font-size: 16px; padding: 2px 8px; }
#settings fieldset { border: 0; margin: 6px 0 0; padding: 0; }
#settings legend { font-weight: 700; padding: 6px 0 2px; color: #555; font-size: 13px; }
/* sections that open and close */
#settings details.section { border-top: 1px solid #ddd; }
#settings details.section > summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 9px 4px; list-style: none; display: flex; align-items: center; gap: 8px; }
#settings details.section > summary::-webkit-details-marker { display: none; }
#settings details.section > summary::before { content: "▸"; color: #8a5a00; width: 1em; transition: transform .15s; }
#settings details.section[open] > summary::before { transform: rotate(90deg); }
#settings details.section.has-changes > summary::after { content: "changed"; font-size: 11px; font-weight: 400; background: #fff0c2; color: #7a5200; border-radius: 8px; padding: 0 6px; }
#settings details.section[open] { padding-bottom: 10px; }
#print-panel h3 { margin: 16px 0 6px; font-size: 14px; }
#print-panel .steps { padding-left: 22px; }
#print-panel .steps li { margin-bottom: 8px; }
#print-panel button.primary { font-weight: 600; padding: 6px 16px; }
.warning { background: #fdecea; color: #8a1c12; border-left: 3px solid #c62828; padding: 6px 10px; }
#print-panel .metrics { padding: 6px 10px; background: #f1ede3; border-radius: 6px; font-size: 13px; }
#print-panel .metrics:empty { display: none; }
#bar button.on { background: #fff0c2; border-color: #8a5a00; }
.setting { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 2px 8px; padding: 5px 4px; border-radius: 4px; }
.setting.changed { background: #fff4d6; }
/* a booklet with sizes from before letter-size pages: what that means, and the button to change it */
#settings p.older { background: #f1ede3; border-left: 3px solid #8a5a00; padding: 8px 10px; font-size: 13px; }
#settings p.older button { margin: 4px 0 0; font-weight: 600; }
.setting label { font-weight: 600; }
.setting .hint { grid-column: 1 / -1; }
.hint { color: #666; font-size: 12.5px; }
.numbox { display: flex; align-items: center; gap: 4px; }
.numbox input[type=range] { width: 100px; }
.numbox input.num { width: 5em; }
.numbox .unit { width: 1.4em; color: #666; }
.setting select { max-width: 250px; }
/* Format and binding: nested radio choices */
.format-choice { padding: 4px 4px 8px; }
.format-choice label.choice { display: block; padding: 4px 0; cursor: pointer; }
.format-choice label.choice.disabled { color: #999; cursor: default; }
.format-choice .sub { margin-left: 24px; border-left: 2px solid #e3d6b8; padding-left: 10px; }
.format-choice label.sheets { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; border: 0; padding-left: 22px; }
.format-choice .metrics { margin: 8px 0 0; padding: 6px 10px; background: #f1ede3; border-radius: 6px; font-size: 13px; }
.format-choice .metrics:empty { display: none; }
.format-choice .metrics b { font-variant-numeric: tabular-nums; }
.setting-check { display: block; font-weight: 600; padding: 5px 4px 2px; }
#settings-editor .hint { padding: 0 4px 0 28px; }
.setting .reset { padding: 0 4px; border: 0; background: none; font-size: 16px; color: #8a5a00; }

/* A button with a ▾ part that opens a menu (native popover, placed under the button) */
.split-btn { display: inline-flex; }
.split-btn > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn > button.more { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding: 4px 7px; }
.menu[popover] { position: fixed; inset: auto; margin: 0; width: 380px; max-width: calc(100vw - 16px); max-height: calc(100vh - 70px); overflow: auto;
  box-sizing: border-box; padding: 6px; background: #fff; border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.22); font-size: 14px; }
.menu .item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 4px; }
.menu .item:hover:not(:disabled) { background: #fff0c2; }
.menu .item .hint { display: block; font-weight: 400; }
.split-btn[hidden] { display: none; }
.split-btn > button.chip { font-size: 12px; color: #555; width: 4.6em; }
/* buttons whose words change keep one width, so the ones beside them don't move */
#save { width: 8.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split-btn > button.chip.on { color: #2a7a3a; font-weight: 600; }
.menu label.item.check { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; cursor: pointer; }
.menu label.item.check .hint { grid-column: 2; }
.menu #autosave-note { margin: 4px 10px; }
.menu .menu-head { padding: 4px 10px 6px; color: #666; font-size: 12.5px; }
.steps-menu .item.step { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu h3 { margin: 12px 10px 4px; font-size: 14px; }
.menu .steps { padding-left: 28px; margin: 4px 6px; }
.menu .steps li { margin-bottom: 6px; }
.menu > .hint { margin: 4px 10px; }

#preview { flex: 1; position: relative; min-width: 0; }
/* drag bars between the contents list, the panel and the pages (Split.js sets the widths) */
#app.split > #toc-nav, #app.split > #panel, #app.split > #preview { flex: none; }
#app.split > #toc-nav, #app.split > #panel { border-right: 0; }
#app > .gutter { flex: none; background: #d9d5cc; cursor: col-resize; position: relative; }
#app > .gutter:hover, #app > .gutter:active { background: #b9a67a; }
#app > .gutter::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 28px; margin-top: -14px;
  border-left: 1px dotted #888; border-right: 1px dotted #888; }
/* zoom: the whole frame is scaled from outside (its own layout of the pages never changes) */
#preview { --zoom: 1; overflow: hidden; }
#preview iframe { position: absolute; left: 0; top: 0; width: calc(100% / var(--zoom)); height: calc(100% / var(--zoom)); border: 0;
  transform: scale(var(--zoom)); transform-origin: 0 0; }
#zoom { position: absolute; top: 8px; right: 22px; z-index: 5; display: flex; gap: 2px; background: rgba(255, 255, 255, .92);
  border: 1px solid #ccc; border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#zoom button { border: 0; background: none; padding: 3px 6px; color: #444; display: flex; align-items: center; font-size: 12px; min-width: 3.4em; justify-content: center; }
#zoom button:first-child, #zoom button:last-child { min-width: 0; }
#zoom button:hover:not(:disabled) { background: #fff0c2; border-radius: 4px; }
#zoom button:disabled { opacity: .35; cursor: default; }
#zoom-reset.fitting { color: #8a5a00; }
/* a change on its way to the pages: bottom left */
#busy { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5a4a2a;
  background: rgba(255, 255, 255, .94); border: 1px solid #d8c9a6; border-radius: 14px; padding: 4px 10px 4px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#busy[hidden] { display: none; }
#busy .spin { width: 14px; height: 14px; border: 2.5px solid #e3d6b8; border-top-color: #8a5a00; border-radius: 50%; animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
/* views: bottom right of the pages */
#views { position: absolute; bottom: 12px; right: 22px; z-index: 5; display: flex; gap: 2px; background: rgba(255, 255, 255, .94);
  border: 1px solid #ccc; border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#views button { border: 0; background: none; padding: 3px 8px; color: #444; display: flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 4px; }
#views button:hover { background: #f3ecdb; }
#views button.on { background: #fff0c2; color: #000; box-shadow: inset 0 0 0 1px #8a5a00; }
#preview iframe.loading { visibility: hidden; }

#signin { max-width: 36em; margin: 24px auto; padding: 20px 24px; background: #fff; border: 1px solid #ccc; font-size: 15px; line-height: 1.5; }
#signin h2 { margin-top: 0; font-size: 20px; }
#signin .why { color: #b00; }
#signin li { margin-bottom: 6px; }
#signin input { width: 100%; box-sizing: border-box; font: 15px monospace; padding: 6px; margin: 8px 0; }
#signin .small { font-size: 13px; color: #555; }
#signin .or { border-top: 1px solid #ddd; margin-top: 16px; padding-top: 8px; }
#refolder { max-width: 36em; margin: 24px auto; padding: 16px 24px; background: #fff; border: 1px solid #ccc; }
#refolder a { margin-left: 12px; color: #555; }

/* Edit booklets dialog */
#books-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid #bbb; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.25); padding: 8px 20px; }
#books-dialog::backdrop { background: rgba(0,0,0,.25); }
#books-dialog h2 { font-size: 18px; margin: 8px 0; }
#books-list { padding-left: 24px; }
#books-list li { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid #eee; }
#books-list li .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#books-list li button { padding: 1px 8px; font-size: 13px; }
#books-dialog .end { text-align: right; }

/* Narrow screens: panel above the pages */
@media (max-width: 900px) {
  #app { flex-direction: column; }
  #panel { width: auto; height: 55vh; border-right: 0; border-bottom: 1px solid #ccc; }
  /* (the contents list is left out; its Feedback button stays, as a strip above the panel) */
  #toc-nav { width: auto; flex-direction: row; justify-content: flex-end; border-right: 0; border-bottom: 1px solid #ccc; }
  #toc-list { display: none; }
  #feedback-btn { margin: 4px 8px; padding: 3px 10px; }
  #preview { min-height: 45vh; }
  #bar { flex-wrap: wrap; }
}