:root {
  --accent: #770000;
  --accent-hover: #aa0000;
  --border-color: #ccc;
  --header-bg: #eee;
  --header-fg: #333;
  --error-bg: #fdd;
  --error-fg: #a00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: #222;
}

/* Background matches #editor-wrap's gray so the area the sidebar doesn't cover reads as the same canvas, not a mismatched gap. */
#app-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #525252;
}

/* align-self: flex-start lets the sidebar's chrome end where its content ends, rather than stretching the full window height. */
#sidebar {
  flex: 0 0 auto;
  align-self: flex-start;
  max-height: 100%;
  width: 168px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

#main-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ID+class selectors throughout this section are deliberate - a plain class rule loses to #sidebar/#format-toolbar's own ID rules regardless of source order. */
#sidebar.floating-panel,
#format-toolbar.floating-panel {
  position: fixed;
  z-index: 500;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-height: calc(100vh - 32px);
  overflow: hidden auto;
}

/* Fixed width, not auto - tab count changing the panel's width made the button groups above keep shifting. */
#sidebar.floating-panel.shape-row {
  width: min(312px, calc(100vw - 32px));
}

#sidebar.floating-panel.shape-column {
  width: 168px;
}

/* 800px is the narrowest point where everything settles into two evenly-loaded rows instead of stranding Clear alone on a third. */
#format-toolbar.floating-panel.shape-row {
  width: min(800px, calc(100vw - 32px));
}

/* "Flexbox masonry": flex-wrap on a column-direction container starts a new column once items hit the explicit height. width is a fixed number, not max-content - a column-wrap container doesn't reliably size itself to fit more than its first column. 250x570 is empirically tuned for two even columns with no scroll. */
#format-toolbar.floating-panel.shape-column {
  flex-wrap: wrap;
  align-content: flex-start;
  width: min(250px, calc(100vw - 32px));
  height: min(570px, calc(100vh - 64px));
}

.floating-panel.shape-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.floating-panel.shape-column {
  flex-direction: column;
  align-items: flex-start;
}

#sidebar.shape-row .sidebar-group {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

#sidebar.shape-row .sidebar-group button {
  width: auto;
}

#sidebar.shape-row .sidebar-hr {
  border-top: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  width: 0;
  align-self: stretch;
  margin: 0 4px;
}

/* flex-wrap, not overflow-x:auto - a hidden horizontal scroll region clipped the active tab off the edge with no visible affordance. */
#sidebar.shape-row #doc-tabs {
  flex-direction: row;
  flex-wrap: wrap;
  overflow: visible;
  border-top: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* flex-grow stretches each wrapped row to fill leftover width instead of a ragged gap; max-width caps a lone tab on the last row. */
#sidebar.shape-row .doc-tab {
  flex: 1 1 110px;
  min-width: 90px;
  max-width: 220px;
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* Small fixed width, not 100% - with multiple columns, "full width" has no single column to resolve against, and inflated every column that had one. */
#format-toolbar.shape-column .tb-sep {
  width: 28px;
  height: 1px;
  align-self: auto;
  margin: 4px 0;
}

.panel-handle {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  flex: 0 0 auto;
  align-self: stretch;
}

.floating-panel .panel-handle {
  display: flex;
}

.panel-handle:active {
  cursor: grabbing;
}

.panel-handle-grip {
  opacity: 0.6;
  font-size: 12px;
  letter-spacing: -2px;
  user-select: none;
}

.panel-shape-btn {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: none;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.panel-shape-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.panel-shape-btn.active {
  background: var(--accent);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.sidebar-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0;
}

#format-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Hidden entirely at one document - #add-tab-btn stays always-visible, so this never removes the only way to grow past one. */
#doc-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

#doc-tabs[hidden] {
  display: none;
}

.doc-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  color: #ddd;
  font-size: 13px;
}

.doc-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.doc-tab.active {
  background: var(--accent);
  color: white;
  font-weight: bold;
}

.doc-tab-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-tab-close {
  flex: 0 0 auto;
  width: auto;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
}

.doc-tab-close:hover {
  opacity: 1;
}

.sidebar-group button,
#format-toolbar button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
}

.sidebar-group button {
  width: 100%;
  text-align: left;
}

.sidebar-group button:hover,
#format-toolbar button:hover {
  background: var(--accent-hover);
}

#format-toolbar button.active {
  background: white;
  color: var(--accent);
}

#font-family-input,
#font-size-input {
  background: white;
  color: #222;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
}

#font-family-input {
  width: 130px;
}

#font-size-input {
  width: 70px;
}

#font-family-input:focus,
#font-size-input:focus {
  outline: 2px solid var(--accent-hover);
}

#detect-fonts-btn {
  padding: 4px 6px;
}

#text-color-input,
#bg-color-input {
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  background: none;
}

.tb-label {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 0.05em;
}

.tb-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

#file-name-label {
  font-family: monospace;
  font-size: 12px;
  opacity: 0.85;
  overflow-wrap: break-word;
}

#doc-stats {
  font-family: monospace;
  font-size: 12px;
  opacity: 0.7;
  overflow-wrap: break-word;
}

#outline-select {
  width: 100%;
  background: white;
  color: #222;
  border: none;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}

#outline-select:disabled {
  opacity: 0.6;
}

#sidebar.shape-row #outline-select {
  width: 170px;
}

#reopen-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  flex: 0 0 auto;
}

#reopen-banner[hidden] {
  display: none;
}

#reopen-banner-text {
  font-family: monospace;
}

#reopen-banner button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}

#reopen-banner button:hover {
  background: var(--accent-hover);
}

#reopen-banner-dismiss-btn {
  background: #999;
}

#reopen-banner-dismiss-btn:hover {
  background: #888;
}

#find-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  flex: 0 0 auto;
}

#find-bar[hidden] {
  display: none;
}

#find-bar .tb-sep {
  background: rgba(0, 0, 0, 0.15);
}

#find-input, #replace-input {
  font-family: monospace;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  width: 220px;
}

#find-match-count {
  font-family: monospace;
  font-size: 12px;
  opacity: 0.75;
  min-width: 70px;
}

#find-bar button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 13px;
  cursor: pointer;
}

#find-bar button:hover {
  background: var(--accent-hover);
}

#find-close-btn {
  background: #999;
}

#find-close-btn:hover {
  background: #888;
}

#main-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* Darker than the content column, so it reads as a bounded editing area rather than an accidental full-bleed blank screen. */
#editor-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: #525252;
  padding: 0 24px;
}

#editor {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Pure visual overlay - never touches document/DOM content. Positioned relative to #editor since quill.getBounds() returns coordinates in that same frame. */
#find-flash {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 214, 0, 0.65);
  border-radius: 2px;
  opacity: 0;
  z-index: 5;
}

#find-flash[hidden] {
  display: none;
}

#find-flash.flashing {
  animation: find-flash-fade 0.9s ease-out forwards;
}

@keyframes find-flash-fade {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

.ql-editor {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: #fff;
  height: auto; /* overrides quill.core.css's height:100% - #editor-wrap is the one scrollable region, not this */
  min-height: 100%;
  padding: 48px 56px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* quill.core.css only resets margins here - the rest normally comes from the Snow theme, which isn't loaded. */
.ql-editor blockquote {
  border-left: 4px solid var(--border-color);
  padding-left: 16px;
  color: #555;
}

.ql-editor code {
  font-family: monospace;
  background: #eee;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

.ql-editor .ql-code-block-container {
  background: #333;
  color: #eee;
  padding: 12px 16px;
  border-radius: 4px;
}

.ql-editor a {
  color: var(--accent-hover);
}

.ql-editor li[data-list="bullet"] > .ql-ui::before {
  content: '-';
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
}

/* Offscreen images have src stripped (see the IntersectionObserver in script.js) - this placeholder stops text jumping around on unload/reload. */
.ql-editor img:not([src]) {
  min-width: 120px;
  min-height: 120px;
  background: repeating-linear-gradient(45deg, #ddd, #ddd 10px, #eee 10px, #eee 20px);
  border-radius: 4px;
}

#toast {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px 14px;
  border-radius: 5px;
  font-family: monospace;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483000;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  background: #333;
  color: white;
  padding: 24px;
  border-radius: 8px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.modal-panel-wide {
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
}

.modal-panel label {
  font-size: 13px;
  opacity: 0.85;
}

.modal-panel input[type="text"],
.modal-panel input[type="number"] {
  font-family: monospace;
  font-size: 13px;
  padding: 6px 8px;
  border: none;
  border-radius: 3px;
  background: white;
  color: #222;
}

.modal-panel input[type="text"]:focus,
.modal-panel input[type="number"]:focus {
  outline: 2px solid var(--accent);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-field input[type="number"] {
  width: 100px;
}

.settings-field-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="checkbox"] {
  accent-color: var(--accent);
}

.settings-hint {
  opacity: 0.6;
  font-weight: normal;
  font-size: 11px;
}

.shortcuts-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  font-size: 13px;
}

.shortcuts-list kbd {
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: monospace;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}

.modal-actions button:hover {
  background: var(--accent-hover);
}

#filename-modal-cancel-btn,
#settings-cancel-btn {
  background: #555;
}

#filename-modal-cancel-btn:hover,
#settings-cancel-btn:hover {
  background: #666;
}

#settings-reset-toolbar-positions-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}

#settings-reset-toolbar-positions-btn:hover {
  background: var(--accent-hover);
}