/* Minimal by design: semantic HTML with the browser's default controls and
 * link colors; CSS only handles layout (centering, spacing) plus the few
 * things HTML cannot express (diff colors, muted text). `color-scheme`
 * lets the browser itself theme light and dark. Translucent grays work on
 * both schemes without a media query. */
:root { color-scheme: light dark; }

body { font-family: sans-serif; margin: 0; line-height: 1.5; }

#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #88888866;
}
#topbar[hidden] { display: none; }
#brand { font-weight: bold; color: inherit; text-decoration: none; }
#topbar nav { display: flex; gap: 0.5rem; }

#app { max-width: 48rem; margin: 0 auto; padding: 1rem; }

.muted { color: #888888; }
.error { color: #cc2222; }

/* Login */
.login-box { max-width: 20rem; margin: 15vh auto 0; display: grid; gap: 0.6rem; text-align: center; }
.login-box h1 { font-size: 1.2rem; margin: 0; }

/* File tree */
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid #88888844; }
.files .name { min-width: 12rem; }
.files .msg { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .files .msg { display: none; } .files .name { min-width: 0; } }

.crumb { margin: 0.5rem 0 1rem; }
.doc-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.8rem 0; }

/* Document content */
.raw, .rendered pre { background: #88888822; padding: 0.6rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.rendered img { max-width: 100%; }
.rendered table { border-collapse: collapse; }
.rendered th, .rendered td { border: 1px solid #88888866; padding: 0.2rem 0.6rem; }
.rendered blockquote { border-left: 3px solid #88888866; margin-left: 0; padding-left: 0.9rem; }
.rendered code { background: #88888822; padding: 0.05em 0.3em; }
.rendered pre code { background: none; padding: 0; }

/* History */
.versions { list-style: none; margin: 0 0 1rem; padding: 0; }
.versions li { padding: 0.4rem 0; border-bottom: 1px solid #88888844; cursor: pointer; }
.versions li.selected .msg { font-weight: bold; }
.diff { font-family: monospace; font-size: 0.85em; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid #88888844; padding: 0.5rem; }
.diff .add { background: #22aa2230; }
.diff .del { background: #cc222230; }