/* =================== COLORS =================== */

:root {
  /* Native form controls (inputs, selects, file pickers) follow the theme. */
  color-scheme: light;

  --background-color: #fff;
  --text-color: #000;


  --link-color: #0000aa;
  --link-color-visited: #007733;
  --link-color-hover: #aa0000;
  --link-color-active: #0000aa;
  --grey-1: #ccc;
  --grey-2: #eee;
  --main-width: 600px;
}

:root.dark-mode {
  color-scheme: dark;

  --background-color: #121212;
  --text-color: #ffffff;

  --link-color: #6699ff;
  --link-color-visited: #66cc88;
  --link-color-hover: #ff5555;
  --link-color-active: #6699ff;

  --grey-1: #444444;
  --grey-2: #222222;
  --default-width: 600;
}

.dark-mode button {
  background-color: #555;
  color: #fff;

}

/* =================== CHANGING HTML DEFAULTS =================== */
/* Change defaults to make semantic HTML look great */


* {
  box-sizing: border-box;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 1rem;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

h1 {
  font-size: 2rem;
}

a:link { text-decoration: none; color: var(--link-color); }
a:visited { text-decoration: none; color: var(--link-color-visited); }
a:hover { text-decoration: none; color: var(--link-color-hover); }
a:active { text-decoration: none; text-decoration: underline; color: var(--link-color-active); }


blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--grey-1);
  font-style: italic;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
  /* Natural width: thin tables stay thin, wide ones may bleed up to 10rem
     per side out of the content column, but never past the viewport. */
  width: max-content;
  max-width: min(100% + 20rem, 100vw - 2rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* display:block lets the table itself scroll horizontally when even the
     bleed cap is too narrow (rows become an anonymous inner table). */
  display: block;
  overflow-x: auto;
}

th, td {
  border: 1px solid var(--grey-1);
  padding: 0.25em 0.6em;
}

th {
  background-color: var(--grey-2);
}

#write textarea {
  width: 100%;
  height: 90vh; /* fallback when CodeMirror fails; matches #md-preview */
  font-family: monospace;
  box-sizing: border-box;
}

/* /write: editor and live preview side by side. The row bleeds out of the
   600px content column (same centering trick as wide tables) up to twice the
   column width, so the editor keeps its usual width and the preview gets the
   same. When the viewport is too narrow for two panes, the preview wraps
   below the editor. */
#editor-split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1em 0;
  width: min(76rem, 100vw - 2rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#editor-split > * {
  flex: 1 1 34rem;
  min-width: 0;
}

#md-preview {
  border: 1px solid var(--grey-1);
  padding: 0 1rem;
  height: 90vh; /* the editor's height (editor/editor.js) */
  overflow: auto;
}

a.tag {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.4;
  padding: 0 0.6em;
  margin-left: 0.35em;
  border: 1px solid var(--grey-1);
  border-radius: 999px;
}

.tag-cloud a.tag {
  margin: 0 0.35em 0.5em 0;
  font-size: 1em;
}

article img.preview {
  border: 1px solid var(--grey-1);
  border-radius: 6px;
}

/* Anything marked dark-mode-adaptive is color-inverted in dark mode (keeps
   hues via the rotate). Meant for diagram-like images with light backgrounds;
   don't put it on photos. */
.dark-mode .dark-mode-adaptive { filter: invert(1) hue-rotate(180deg); }

img.preview-thumb[hidden] {
  display: none;
}

form .field {
  margin: 1em 0; /* same spacing as the <p> field groups */
}

ul.file-list {
  margin: 0.5em 0;
}

ul.file-list button,
#preview-remove {
  font-size: 0.8em;
  padding: 0 0.5em;
  margin-left: 0.5em;
}

ul.history li {
  margin-bottom: 0.5em;
}

ul.commit-files {
  margin: 0.2em 0 0;
  font-size: 0.85em;
}

#feed-form textarea {
  width: 100%;
  line-height: 1.6;
  /* Grows with its content (see feed.html) between 3 and 20 lines. */
  min-height: calc(3 * 1.6em + 0.5em);
  max-height: calc(20 * 1.6em + 0.5em);
  overflow-y: auto;
  resize: none;
}

section.feed-post {
  margin-top: 1.5em;
  padding-top: 0.5em;
  border-top: 1px solid var(--grey-1);
}

pre.diff {
  font-size: 0.85em;
  overflow-x: auto;
  white-space: pre; /* diffs must not wrap */
  padding: 0.5em;
  border: 1px solid var(--grey-1);
  border-radius: 6px;
}
pre.diff .add { color: var(--link-color-visited); }
pre.diff .del { color: var(--link-color-hover); }
pre.diff .hunk { color: var(--link-color); }
pre.diff .meta { font-weight: bold; }
ul.history li small {
  display: block;
}

img.preview-thumb {
  display: block;
  max-height: 8em;
  max-width: 16em;
  margin: 0.5em 0;
  border: 1px solid var(--grey-1);
  border-radius: 6px;
}

article footer {
  padding: 0.5em;
  margin-top: 2em;
  font-size: 0.9em;
}

blockquote cite {
  font-weight: bold;
}

pre {
  white-space: pre-wrap;
}


/* =================== SMALL DEVICES =================== */
@media (max-width: 640px) {
  /* Keep table columns readable on narrow screens: don't let them be
     squeezed into one-word slivers — the table scrolls instead. */
  th, td {
    min-width: 4rem;
  }
}

@media (max-width: 300px) {
  body {
    padding: 0;
    word-break: break-word;
  }
  table {
    /* Tables scroll horizontally, so cells never need mid-word breaks. */
    word-break: normal;
  }
  figure {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 130px) {
  ul {
    padding-left: 1rem;
  }
  blockquote {
    padding-left: 0;
  }
}

/* =================== CUSTOM CLASSES FOR STYLING =================== */
/* Defines my page-style on top of HTML */

main, footer {
  max-width: 600px; /* With default Arial: 480px Harry Potter width, 566 Medium */ 
}

main, header, footer {
  margin: 0 auto;
}


article footer {
  margin-top: 5rem;
  background-color: var(--grey-2);
  padding: 0.5rem;
  border: 1px solid var(--grey-1);
}

#page-footer {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 5rem;
  background-color: var(--grey-2);
  padding: 0.5rem;
  border: 1px solid var(--grey-1);
}

#page-header {
  width: 100%;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--grey-1);
}

#page-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#site-name {
  color: var(--text-color);
}

.inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.inline-list li {
  display: inline;
}
.inline-list li:not(:last-child)::after {
  content: " - ";
}

.only-with-js {
  /* to prevent broken ui without js */
  opacity: 0;
}

.note {
  margin: 2rem 0;
  padding: 0.25rem 0;
  font-size: 0.9em;
  border-top: 1px solid var(--grey-1);
  border-bottom: 1px solid var(--grey-1);
}

/* keep the logout button inline next to the theme toggle */
.inline-form {
  display: inline;
  margin: 0;
}

.error {
  color: var(--link-color-hover);
}