html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

#app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  width: 100vw;
}

#app.sidebar-hidden {
  /* Collapse to a single column. The grid-template-columns of "280px 1fr"
     plus `display: none` on the sidebar would auto-place `#main` into the
     0px first track and wedge the editor toolbar into a single-button
     column. Going single-track keeps `#main` full-width. */
  grid-template-columns: 1fr;
}

#app.sidebar-hidden #sidebar {
  display: none;
}

/* --- Sidebar --- */
#sidebar {
  position: relative;
  background: #f7f7f7;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem 0.55rem;
  flex-shrink: 0;
}

.sidebar-brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-family: "Stardos Stencil", "Arial Black", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: #111;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#sidebar-toolbar {
  flex-shrink: 0;
}

#sidebar-toolbar .form-control {
  min-width: 0;
}

#file-list {
  flex: 1;
  overflow-y: auto;
  font-size: 0.9rem;
}

#file-list li {
  padding: 0.18rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  user-select: none;
}

#file-list li:hover {
  background: #eaeaea;
}

#file-list li.folder {
  color: #555;
  font-weight: 500;
}

#file-list li.folder .folder-toggle {
  display: inline-block;
  width: 1em;
  color: #888;
  margin-right: 0.15em;
}

#file-list li.folder .folder-count {
  color: #999;
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.4em;
}

#file-list li.file.active {
  background: #d6e4ff;
  font-weight: 500;
  color: #000;
}

#sidebar-footer {
  font-size: 0.75rem;
}

/* --- Main pane --- */
#main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* App bar: views + omnibox, always visible. */
#app-bar {
  flex-shrink: 0;
}

/* Editor toolbar: kebab + formatting buttons. Lives inside the editor
   pane (#editor-container) so it hides for free when the pane hides.
   container-type lets the progressive-collapse rules below match the
   toolbar's own width rather than the viewport's — important in split
   view where the editor pane is only ~half the viewport. */
#editor-toolbar {
  flex-shrink: 0;
  position: relative; /* anchor for the kebab overflow dropdown */
  container-type: inline-size;
  container-name: tb;
}

/* Default (wide): the kebab is hidden, formatting buttons sit inline. */
#formatting-kebab {
  display: none;
}

#editor-frame {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Status bar lives at the bottom of #main, always visible across every
   view mode. Houses the current-path indicator and the dirty badge. */
#status-bar {
  flex-shrink: 0;
  min-height: 1.6rem;
  font-size: 0.78rem;
}
#status-bar #current-path {
  cursor: pointer;
  display: inline-block;
  max-width: 80%;
  vertical-align: middle;
}
/* markDirty() overwrites class wholesale, so positioning lives here on the
   id selector instead of on classes that the JS would clobber. */
#status-bar #dirty-indicator {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
}

/* Conflict-recovery action buttons. Hidden until state.saveConflict is true.
   Anchored at the LEFT edge so they don't collide with the right-pinned
   dirty-indicator (which shows "conflict" when active). */
#status-bar #conflict-actions {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.25rem;
}
#status-bar #conflict-actions[hidden] {
  display: none !important;
}
#status-bar #conflict-actions .btn {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  line-height: 1.3;
}

/* Progressive collapse driven by the *toolbar's* width via a container
   query. The kebab appears the moment any button is hidden so the
   dropdown can surface the full set. Tiers (least → most important):
     fmt-low    sub, sup, table        — first to go
     fmt-mid    strike, link, image, code, code-block
     fmt-folded quote, ul, ol, task
     (unclass)  bold, italic, H1, H2, H3 — last to go, then kebab-only
   Breakpoints picked against actual button-pack widths (full set ~600px
   including kebab + ms-auto gap). Adjust as fonts/buttons change. */
@container tb (max-width: 650px) {
  #formatting-kebab { display: inline-flex; }
  #formatting-buttons:not(.is-open) .fmt-low { display: none; }
}
@container tb (max-width: 530px) {
  #formatting-buttons:not(.is-open) .fmt-mid { display: none; }
}
@container tb (max-width: 380px) {
  #formatting-buttons:not(.is-open) .fmt-folded { display: none; }
}
@container tb (max-width: 280px) {
  /* Kebab-only: hide everything inline; dropdown becomes the sole path. */
  #formatting-buttons:not(.is-open) { display: none !important; }
}

/* Keep the omnibox shrinkable but never invisible. Without an explicit
   min-width it could collapse to nothing as siblings demand space. */
#omnibox-wrap {
  min-width: 140px;
}

/* Open dropdown: instead of an overlay, the formatting panel becomes a
   second row of the editor toolbar. editor-toolbar gains wrap so the
   panel can sit on its own line; formatting-buttons claims the full
   row via flex-basis: 100% and reorders after the kebab. Editor area
   below shifts down naturally (editor-toolbar has flex-shrink: 0 in a
   flex-column #editor-container, so its growth comes out of editor-area). */
#editor-toolbar:has(#formatting-buttons.is-open) {
  flex-wrap: wrap !important;
}
#formatting-buttons.is-open {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-basis: 100% !important;
  order: 1;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #ddd;
  background: transparent;
  box-shadow: none;
}
#formatting-buttons.is-open .fmt-low,
#formatting-buttons.is-open .fmt-mid,
#formatting-buttons.is-open .fmt-folded {
  display: inline-flex !important;
}

/* Normalise button sizing inside the dropdown so each formatting tool
   reads as a uniform square tile regardless of icon size, sub/sup glyphs,
   or being inside a btn-group. */
#formatting-buttons.is-open .btn,
#formatting-buttons.is-open .btn-group .btn {
  width: 34px;
  height: 32px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.85rem;
  overflow: hidden;
}
/* The heading buttons set inline font-size on their icons (1.2em / 1.0em /
   0.8em) to telegraph H1 > H2 > H3 in the wide toolbar. Override inside
   the dropdown so the icon sizes don't push the row taller. */
#formatting-buttons.is-open .btn-group .fa-heading {
  font-size: 0.85rem !important;
}
/* Same for the sub/sup buttons: the literal X<sub>2</sub> markup grows
   vertically; clip to the tile and centre. */
#formatting-buttons.is-open #toolbar-sub,
#formatting-buttons.is-open #toolbar-sup {
  font-size: 0.7rem;
}

/* Editor pane: stacks toolbar + find/replace bar + editor surface. The
   pane itself hides via #editor-frame.view-preview rule, which takes the
   toolbar with it — no JS visibility juggling needed. */
#editor-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #ddd;
}

/* The actual editor surface lives inside #editor-area; this is where the
   textarea and the find/current-line highlight overlay are layered. */
#editor-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#editor-area #editor {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  padding: 0.75rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}

#editor-highlight-current {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  white-space: pre-wrap;
  font: inherit;
  color: transparent;
  overflow: hidden;
  padding: 0.75rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}

#editor-highlight-current mark.__find {
  background: #ffea7f;
  color: transparent;
}

#editor-highlight-current mark.__current {
  background: #ffb84d;
}

#preview {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background-color: #fafafa;
  padding: 1.5rem 2rem;
  font-family: Charter, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #222;
}

#preview.hidden,
#editor-frame.view-editor #preview {
  display: none;
}

#editor-frame.view-preview #editor-container {
  display: none;
}

#editor-frame.view-preview #preview {
  max-width: 880px;
  margin: 0 auto;
}

#preview h1,
#preview h2,
#preview h3,
#preview h4,
#preview h5,
#preview h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

#preview h1 {
  font-size: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

#preview h2 {
  font-size: 1.6rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

#preview h3 {
  font-size: 1.3rem;
}

#preview p {
  margin-bottom: 1em;
}

/* Keep embedded images inside the preview column instead of overflowing the
   page width. height:auto preserves aspect ratio. */
#preview img {
  max-width: 100%;
  height: auto;
}

#preview a {
  color: #0a66c2;
  text-decoration: none;
}

#preview a:hover {
  text-decoration: underline;
}

#preview ul,
#preview ol {
  padding-left: 2em;
  margin-bottom: 1em;
}

#preview blockquote {
  margin-left: 0;
  padding-left: 1.5em;
  border-left: 3px solid #ccc;
  color: #666;
  font-style: italic;
}

/* GFM-style admonitions. Plain blockquote keeps the italic-grey look; ones
   restyled by styleAdmonitions() get a left-tint per type + readable body.
   Style assignment happens in app.js (styleAdmonitions). */
#preview .hv-alert {
  border-left: 4px solid var(--hv-alert-color, #999);
  padding: 0.5em 1em;
  margin: 0.75em 0;
  background: var(--hv-alert-bg, rgba(0, 0, 0, 0.03));
  border-radius: 0 4px 4px 0;
  color: inherit;
  font-style: normal;
}
#preview .hv-alert .hv-alert-title {
  font-weight: 600;
  margin: 0 0 0.25em 0;
  color: var(--hv-alert-color);
}
#preview .hv-alert .hv-alert-title i {
  margin-right: 0.4em;
}
#preview .hv-alert p:last-child {
  margin-bottom: 0;
}

#preview .hv-alert-note      { --hv-alert-color: #0969da; --hv-alert-bg: rgba(9, 105, 218, 0.08); }
#preview .hv-alert-tip       { --hv-alert-color: #1a7f37; --hv-alert-bg: rgba(26, 127, 55, 0.08); }
#preview .hv-alert-warning   { --hv-alert-color: #9a6700; --hv-alert-bg: rgba(154, 103, 0, 0.08); }
#preview .hv-alert-important { --hv-alert-color: #8250df; --hv-alert-bg: rgba(130, 80, 223, 0.08); }
#preview .hv-alert-caution   { --hv-alert-color: #cf222e; --hv-alert-bg: rgba(207, 34, 46, 0.08); }
/* Comment = AI / meta. Muted grey + dashed left border so it sits visually
   apart from user-authored callouts above. */
#preview .hv-alert-comment {
  --hv-alert-color: #6e7781;
  --hv-alert-bg: rgba(110, 119, 129, 0.06);
  border-left-style: dashed;
}

#preview pre {
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
}

#preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background-color: #f0f0f0;
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

#preview pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

#preview input[type="checkbox"] {
  margin-right: 0.4em;
}

/* Enabled = click-to-toggle (wired in app.js). Disabled boxes are view-only
   (e.g. when the file is dirty or checkboxes came from an {{include:}}). */
#preview input[type="checkbox"]:not([disabled]) {
  cursor: pointer;
}

/* --- Misc --- */
#dirty-indicator.dirty::before {
  content: "●";
  color: #d97706;
  margin-right: 0.25rem;
}

#dirty-indicator.conflict {
  color: #dc2626;
  font-weight: 600;
}

#dirty-indicator.conflict::before {
  color: #dc2626;
}

/* ---------- Mobile (narrow viewports): sidebar becomes a drawer, the
   editor and preview stack vertically instead of sitting side-by-side. ---------- */
@media (max-width: 767px) {
  #app {
    grid-template-columns: 1fr;
    position: relative;
  }

  #sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: min(86vw, 320px);
    z-index: 20;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    transition: left 0.18s ease-out;
  }

  #app:not(.sidebar-hidden) #sidebar {
    left: 0;
    display: flex;
  }

  /* When the drawer is open on mobile, dim the rest of the UI behind it
     and let a tap on the backdrop close it again. */
  #app:not(.sidebar-hidden)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 15;
  }

  #editor-frame {
    flex-direction: column;
  }

  #editor-container,
  #preview {
    border-right: none;
    border-top: 1px solid #ddd;
    flex: 1;
    min-height: 0;
  }

  #editor-container {
    border-top: none;
  }
}

#current-path.copied::before {
  content: "Copied to clipboard! ✅";
  font-size: 0.6rem;
  background: #dde;
  color: #666;
  margin-right: 0.25rem;
  padding: 2px 5px 2px 5px;
  border-radius: 12px;
}

/* Wikilinks. Rendered into the preview by app.js after marked + DOMPurify. */
#preview a.wikilink {
  text-decoration: none;
  cursor: pointer;
}
#preview a.wikilink-pending {
  color: #888;
  border-bottom: 1px dotted #888;
}
#preview a.wikilink-resolved {
  color: #2050c8;
  border-bottom: 1px solid #2050c8;
}
#preview a.wikilink-resolved:hover {
  background: rgba(32, 80, 200, 0.08);
}
#preview a.wikilink-unresolved {
  color: #a06000;
  font-style: italic;
  border-bottom: 1px dotted #a06000;
}
#preview a.wikilink-unresolved::before {
  content: "+ ";
  font-style: normal;
  opacity: 0.6;
}
#preview a.wikilink-unresolved:hover {
  background: rgba(160, 96, 0, 0.08);
}

/* Frontmatter tags rendered as chips at the top of the preview pane. */
#preview .tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem 0;
}
#preview .tag-strip .tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  color: #335;
  background: #e8edf5;
  border: 1px solid #c8d2e0;
  border-radius: 999px;
  line-height: 1.4;
  cursor: pointer;
  font-family: inherit;
}
#preview .tag-strip .tag:hover {
  background: #d0dcee;
}

/* Sidebar's "active tag filter" badge. Click clears the filter. */
.tag-filter-badge {
  display: inline-flex;
  align-items: center;
  margin: 0.35rem 0.5rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  color: #335;
  background: #fde6a6;
  border: 1px solid #d8a82c;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.tag-filter-badge:hover {
  background: #f5d97a;
}

.box-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.162);
}

#context-menu {
  position: absolute;
  top: 0;
  left: 20px;
  width: 300px;
  height: auto;
  background: #eee;
  z-index: 1000;
  border-radius: 15px;
  border-top: #fff 1px solid;
  border-left: #fff 1px solid;
  border-right: #ddd 1px solid;
  border-bottom: #ddd 1px solid;
  display: none;
  visibility: hidden;
}

#context-menu li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  user-select: none;
  padding: 0;
  margin: 0;
}

#context-menu li:hover {
  background: #dde;
}

#context-menu a {
  text-decoration: none;
  color: #333;
}

/* Trash view (sidebar) — rendered into #trash-list when state.sidebarView === "trash". */
#trash-list {
  overflow-y: auto;
}
#trash-list .trash-entry {
  font-size: 0.85rem;
  line-height: 1.3;
}
#trash-list .trash-orig {
  word-break: break-all;
  color: #333;
}
#trash-list .trash-meta {
  margin-top: 0.1rem;
}
#trash-list .trash-actions button {
  font-size: 0.78rem;
}
#trash-toggle-btn[aria-pressed="true"] {
  color: #c44 !important;
}

/* --- Omnibox + command palette --- */
#omnibox-wrap {
  flex: 0 1 320px;
  min-width: 160px;
  max-width: 320px;
  margin-left: auto;
}
#omnibox {
  width: 100%;
}
.omnibox-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 1050;
  font-size: 0.85rem;
}
.omnibox-results[hidden] {
  display: none;
}
.omnibox-row {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  line-height: 1.3;
}
.omnibox-row:last-child {
  border-bottom: none;
}
.omnibox-row.active,
.omnibox-row:hover {
  background: #eef4ff;
}
.omnibox-row .omni-title {
  font-weight: 600;
  color: #222;
  word-break: break-word;
}
.omnibox-row .omni-meta {
  color: #888;
  font-size: 0.78rem;
  margin-top: 0.1rem;
  word-break: break-all;
}
.omnibox-row .omni-snippet {
  color: #555;
  font-size: 0.8rem;
  margin-top: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omnibox-row .omni-snippet mark {
  background: #fff3a3;
  padding: 0 1px;
  color: inherit;
}
.omnibox-empty {
  padding: 0.6rem 0.8rem;
  color: #888;
  font-style: italic;
}
.omnibox-kind {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: #6c757d;
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.omnibox-kind.kind-cmd { background: #6f42c1; }
.omnibox-kind.kind-file { background: #198754; }
.omnibox-kind.kind-tag { background: #fd7e14; }