/* The site's own styles, on top of the Coder theme. */

/* Colours (also used by math.css), switched with the theme's light/dark body class. */
body {
  --accent: #1565c0;
  --accent-hover: #0d47a1;
  --on-accent: #fff;
  --line: #d5d5d5;
  --reply-line: #9e9e9e;
  --comment-bg: rgba(0, 0, 0, .04);
  --reply-bg: rgba(0, 0, 0, .03);
  --field-bg: #fff;
  --field-border: #bdbdbd;
  --banner-bg: rgba(21, 101, 192, .12);
  --error: #c62828;
}
body.colorscheme-dark {
  --accent: #42a5f5;
  --accent-hover: #64b5f6;
  --on-accent: #0b0b0b;
  --line: #424242;
  --reply-line: #757575;
  --comment-bg: rgba(255, 255, 255, .06);
  --reply-bg: rgba(255, 255, 255, .04);
  --field-bg: #2b2b2b;
  --field-border: #555;
  --banner-bg: rgba(66, 165, 245, .15);
  --error: #ef9a9a;
}

.comments { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.comments-count { font-weight: 400; opacity: .7; }
.comments-empty { opacity: .7; }

.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comment { margin: 1.6rem 0; padding: 1.2rem 1.6rem; border-left: 3px solid var(--accent); background: var(--comment-bg); border-radius: 0 4px 4px 0; }
.comment-replies { margin-top: 1.2rem; }
.comment-replies .comment { border-left-color: var(--reply-line); background: var(--reply-bg); }
.comment-head { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; }
.comment-date { font-size: .85em; opacity: .65; }
.comment-body { margin: .6rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.comment-form { margin-top: 3rem; }
.comment-form .field { margin: 1.2rem 0; }
.comment-form label { display: block; font-weight: 600; margin-bottom: .4rem; }
.comment-form input[type=text], .comment-form textarea {
  box-sizing: border-box; width: 100%; padding: .8rem 1rem; font: inherit;
  color: inherit; background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 4px;
}
.comment-form input:focus-visible, .comment-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.comment-form textarea { resize: vertical; min-height: 9rem; }
.char-count { display: block; text-align: right; opacity: .6; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reply-banner { margin: 0; padding: .6rem 1rem; border-radius: 4px; background: var(--banner-bg); }

.button { padding: .8rem 2rem; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 4px; cursor: pointer; }
.button:hover:not(:disabled) { background: var(--accent-hover); }
.button:disabled { opacity: .6; cursor: progress; }
.link-button { padding: 0; font: inherit; font-size: .9em; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; }

.comment-status { min-height: 1.6em; margin: .6rem 0; }
.comment-status.error { color: var(--error); }

.comment-count { opacity: .65; font-size: .9em; }

/* Home page: photo, tagline and links on the left; the introduction in a framed block on the right, as tall as the
   left column; stacked on phones */
.home { display: flex; gap: 4rem; align-items: stretch; margin-top: 4rem; }
.home-card { flex: 0 0 24rem; }
.home-card .avatar img { display: block; width: 100%; }
.home-card h2 { font-size: 2rem; line-height: 1.4; margin: 2rem 0 1.6rem; }
.home-links { list-style: none; margin: 0; padding: 0; }
.home-links li { margin: .6rem 0; }
.home-links a { display: flex; align-items: center; gap: 1.2rem; }
.home-links .icon { width: 2.4rem; height: 2.4rem; font-size: 2.2rem; line-height: 2.4rem; text-align: center; }
.home-links .fa-youtube { color: #ff0000; }
.home-links .fa-linkedin { color: #0a66c2; }
.home-links .fa-github { color: #212121; }
body.colorscheme-dark .home-links .fa-github { color: #dadada; }
.home-text { flex: 1; padding: 2.4rem 3rem; border: 1px solid var(--line); border-radius: 8px; background: var(--comment-bg); }
.home-text h1 { margin-top: 0; }
.home-text p:last-child { margin-bottom: 0; }
@media only screen and (max-width: 768px) {
  .home { flex-direction: column; gap: 3rem; }
  .home-card { flex-basis: auto; width: 24rem; margin: 0 auto; }
  .home-text { flex: none; padding: 2rem; }
}

/* Publications page */
.publications li { margin-bottom: 1.6rem; }