:root {
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --border: #e2e5ea;
  --text: #1f2328;
  --muted: #6b7280;
  --accent: #2f6feb;
  --accent-soft: #e8f0fe;
  --danger: #c02b2b;
  --code-bg: #f2f3f5;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* The theme is resolved to an explicit data-theme by the inline script in index.html
   (and by the toggle), so the dark palette lives in one place instead of being repeated
   for the media query and the manual override. */
:root[data-theme="dark"] {
  --bg: #14171c;
  --bg-alt: #1a1e24;
  --border: #2b313a;
  --text: #dfe3e8;
  --muted: #93a0b0;
  --accent: #6ea1ff;
  --accent-soft: #1e2a3f;
  --danger: #ff8080;
  --code-bg: #21262d;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hidden { display: none !important; }

button {
  font: inherit;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }

input[type="search"], input[type="password"] {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  width: 100%;
}
input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ---------- login ---------- */

.login {
  height: 100%;
  display: grid;
  place-items: center;
}
.login form {
  width: min(320px, 90vw);
  display: grid;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
}
.login h1 { margin: 0 0 4px; font-size: 18px; }
.error { color: var(--danger); margin: 0; min-height: 1em; font-size: 13px; }

/* ---------- layout ---------- */

.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w, 300px) 6px 1fr;
}

.sidebar { grid-column: 1; }
.resizer { grid-column: 2; }
.main { grid-column: 3; }

.resizer {
  cursor: col-resize;
  background: var(--border);
  /* A 6px column is a small target, so widen the grab area without moving the layout. */
  position: relative;
}
.resizer::after {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
.resizer:hover, .resizer:focus-visible, .resizer.dragging { background: var(--accent); outline: none; }
body.resizing { cursor: col-resize; user-select: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg-alt);
  min-height: 0;
  min-width: 0;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 600; }
.icon-btn { padding: 3px 7px; background: transparent; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}
.crumbs a { color: var(--accent); text-decoration: none; cursor: pointer; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span.sep { opacity: .5; }

.listing {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.listing li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing li:hover { background: var(--accent-soft); }
.listing li.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.listing li .sub {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto;
  font-weight: 400;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing li .name {
  flex: 1 1 auto;
  /* The filename is the point of the row: it keeps a floor, and the timestamp beside it
     gives way first (it carries a tooltip with the full figures anyway). */
  min-width: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  visibility: hidden;
}
.listing li:hover .row-actions, .row-actions:focus-within { visibility: visible; }
.row-btn {
  padding: 0 5px;
  font-size: 12px;
  line-height: 20px;
  background: transparent;
  border-color: transparent;
}
.row-btn:hover:not(:disabled) { background: var(--bg); }
.listing .none { color: var(--muted); cursor: default; font-style: italic; }
.listing .none:hover { background: none; }

.sidebar-foot { display: flex; gap: 6px; }
.sidebar-foot button { flex: 1; }

/* ---------- main ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.file-name {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dirty { color: var(--accent); }
.modes { display: flex; gap: 4px; }
.mode.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.actions { display: flex; align-items: center; gap: 8px; }
.status { color: var(--muted); font-size: 12px; }
.status.err { color: var(--danger); }

.panes {
  flex: 1;
  display: grid;
  min-height: 0;
}
.panes.mode-read { grid-template-columns: 1fr; }
.panes.mode-read .editor-wrap { display: none; }
.panes.mode-edit { grid-template-columns: 1fr; }
.panes.mode-edit #preview { display: none; }
.panes.mode-split { grid-template-columns: 1fr 1fr; }

/* The highlight layer sits behind a transparent-background textarea and repeats the
   same text with the same metrics, so its <mark> rectangles line up with the real
   glyphs. Its own text is invisible — only the highlight backgrounds show through. */
.editor-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg);
}

#editor, .backdrop {
  font: 13.5px/1.6 var(--mono);
  padding: 16px 18px;
  border: none;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

#editor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--text);
  background: transparent;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}
.backdrop mark.hit {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: transparent;
  border-radius: 2px;
}
.backdrop mark.hit.current { background: var(--accent); }

.preview {
  overflow-y: auto;
  padding: 22px 28px 80px;
  min-height: 0;
}
.preview .empty { color: var(--muted); }

/* ---------- rendered markdown ---------- */

.markdown-body { max-width: 900px; }
.markdown-body h1, .markdown-body h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: .25em;
}
.markdown-body h1 { font-size: 1.8em; margin-top: 0; }
.markdown-body h2 { font-size: 1.4em; margin-top: 1.6em; }
.markdown-body h3 { font-size: 1.17em; }
.markdown-body a { color: var(--accent); }
.markdown-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--code-bg);
  padding: .15em .35em;
  border-radius: 4px;
}
.markdown-body pre {
  background: var(--code-bg);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote {
  margin: 1em 0;
  padding: .2em 1em;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.markdown-body table { border-collapse: collapse; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 10px; }
.markdown-body th { background: var(--bg-alt); }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); }
.markdown-body input[type="checkbox"] { margin-right: .4em; }
.markdown-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }

@media (max-width: 760px) {
  /* The toolbar cannot fit the path and every button on one line at phone widths;
     give the path its own row instead of truncating it to nothing. */
  .toolbar { flex-wrap: wrap; row-gap: 6px; }
  .file-name { flex: 1 0 100%; }
  .app { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
  .sidebar, .main { grid-column: 1; }
  .sidebar { border-bottom: 1px solid var(--border); }
  .resizer { display: none; }
  .panes.mode-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .editor-wrap { border-right: none; border-bottom: 1px solid var(--border); }
}

.fatal {
  margin: 40px auto;
  max-width: 560px;
  padding: 16px 20px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
}
.fatal small { color: var(--muted); }

.stamp {
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
  padding-left: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.listing li .sub + .stamp { margin-left: 8px; }
/* The row is only ~300px wide; the actions take the stamp's place on hover. */
.listing li:hover .stamp { display: none; }

.file-meta {
  margin-left: 10px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.sort-btn {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.dropzone {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 17px;
  color: var(--accent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.dropzone > div {
  padding: 28px 40px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--bg-alt);
}
.dropzone small { color: var(--muted); font-size: 13px; }

.head-btns { display: flex; gap: 2px; }

/* Search hits wrap onto a second line for the matching text. */
.listing li.hit { flex-wrap: wrap; white-space: normal; }
.listing li.hit .snippet {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.listing li.hit .snippet mark {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
}

.markdown-body mark.hit {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.match-nav { display: flex; align-items: center; gap: 3px; }
.match-nav button { padding: 1px 7px; line-height: 1.4; }
#match-count { color: var(--muted); font-size: 11.5px; min-width: 34px; text-align: center; }
.markdown-body mark.hit.current {
  background: var(--accent);
  color: #fff;
}

.listing li .badge {
  flex-shrink: 0;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* Table of contents: floats under the toolbar rather than taking layout space, so it
   works the same in read, split and edit. */
.main { position: relative; }
.toc {
  position: absolute;
  z-index: 8;
  top: 44px;
  right: 12px;
  width: min(320px, calc(100% - 24px));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.toc a {
  display: block;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc a:hover { background: var(--accent-soft); color: var(--accent); }
.toc a.h1 { font-weight: 600; }
.toc a.h2 { padding-left: 18px; }
.toc a.h3 { padding-left: 30px; }
.toc a.h4 { padding-left: 42px; }
.toc a.h5 { padding-left: 54px; }
.toc a.h6 { padding-left: 66px; }
.toc .none { padding: 6px 8px; color: var(--muted); font-size: 12.5px; font-style: italic; }

.list-tools { display: flex; gap: 6px; }
.list-tools .sort-btn { align-self: auto; }
.listing .clear-recent { cursor: pointer; }
.listing .clear-recent:hover { background: var(--accent-soft); color: var(--accent); }

#btn-logout { flex: 0 0 auto; }

.draft-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12.5px;
}
.draft-bar span { flex: 1; min-width: 0; }

/* Touch and other pointers that cannot hover: the row actions have no reveal
   gesture there, so show them permanently and give them finger-sized targets. */
@media (hover: none) {
  .app { grid-template-columns: var(--sidebar-w, 300px) 0 1fr; }
  .listing li { padding: 9px 7px; gap: 8px; }
  .listing li .row-actions { visibility: visible; }
  .listing li:hover .stamp { display: inline; }   /* undo the hover-only swap */
  .row-btn {
    min-width: 32px;
    padding: 4px 7px;
    font-size: 14px;
    line-height: 24px;
    border-color: var(--border);
  }
  .sidebar-foot button, .list-tools button { padding: 8px 10px; }
  .resizer { display: none; }
}

/* ---------- right-to-left documents ---------- */

/* Code, paths and command lines stay left-to-right even inside an RTL document —
   reversing them would misrepresent what they are. */
.markdown-body[dir="rtl"] pre,
.markdown-body[dir="rtl"] code { direction: ltr; text-align: left; }
.markdown-body[dir="rtl"] pre code { text-align: left; }
.markdown-body[dir="rtl"] blockquote {
  border-left: none;
  border-right: 3px solid var(--border);
}
.markdown-body[dir="rtl"] ul,
.markdown-body[dir="rtl"] ol { padding-right: 2em; padding-left: 0; }
.markdown-body[dir="rtl"] li:has(> input[type="checkbox"]) { margin-right: -1.2em; margin-left: 0; }
.markdown-body[dir="rtl"] h1,
.markdown-body[dir="rtl"] h2 { text-align: right; }

#editor[dir="rtl"], .backdrop[dir="rtl"] { text-align: right; }

#btn-dir { min-width: 42px; font-size: 11.5px; }

.markdown-body .img-missing {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- version diff ---------- */

.diffview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.diff-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: 12.5px;
}
.diff-head #diff-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-stats { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.diff-stats.none { color: var(--muted); }
.diff-body {
  flex: 1;
  overflow: auto;
  padding: 10px 0 60px;
  font: 12.5px/1.6 var(--mono);
  min-height: 0;
}
.dl { display: flex; padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-no {
  flex: 0 0 5.5em;
  color: var(--muted);
  opacity: .7;
  text-align: right;
  padding-right: 10px;
  user-select: none;
}
.dl-sign { flex: 0 0 1.2em; user-select: none; }
.dl-text { flex: 1; min-width: 0; }
.dl.add { background: color-mix(in srgb, #22c55e 16%, transparent); }
.dl.del { background: color-mix(in srgb, #ef4444 16%, transparent); }
.dl.add .dl-sign { color: #15803d; }
.dl.del .dl-sign { color: #b91c1c; }
.dl.skip {
  color: var(--muted);
  font-style: italic;
  padding: 4px 12px 4px calc(6.7em + 12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0;
}
.diff-body .none { padding: 12px; color: var(--muted); font-style: italic; }

:root[data-theme="dark"] .dl.add .dl-sign { color: #4ade80; }
:root[data-theme="dark"] .dl.del .dl-sign { color: #f87171; }

/* Keyboard cursor over the file list, and drag-to-move feedback. */
.listing li.cursor {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.listing li.dragging { opacity: .45; }
.listing li.drop-target {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}