/* ==========================================================================
   CV - a personal/professional profile page, ported from a static mockup
   (a plain-text-styled résumé: monospace, one narrow column, red links).
   An avatar and a short bio up top, then a stack of collapsible entries -
   one per post, title as the <summary>, text as what's underneath - open
   by default, like a resume you can also collapse to skim.

   Links, and an open entry's ★ marker, read var(--accent, ...) - a closed
   entry's ☆ stays whatever color it already was (no color set below), so
   there's only color once an entry is open. --accent itself is set by a
   <style> block in cv/index.html's <head>, only when the site has one
   (Site.accent_color); the var() fallback keeps every site that's never
   touched it looking exactly as it did before that field existed.

   .social-links (see templates/_social_links.html) is a plain list of `a`
   tags - already accent-colored by the `a{}` rule above, no extra color
   rule needed here.
   ========================================================================== */

   *:focus {
    outline: none;
}

::selection {
  background: transparent;
  color: inherit;
}

::-moz-selection {
  background: transparent;
  color: inherit;
}

::-webkit-selection {
  background: transparent;
  color: inherit;
}

body {
  max-width: 570px;
  width: 87vw;
  font-family: monospace;
  font-size: 14px;
  margin: 0 0 0 15px;
  padding: 0;
  color: #222;
  background: #fff;
}

a {
  color: var(--accent, grey);
}

.muted {
  color: #aaa;
}

/* Scoped to .intro specifically - the bio line is meant to pick up the
   accent color; .empty-state's "no posts yet" text (also .muted) isn't
   part of that and stays plain grey regardless. */
.intro .muted {
  color: var(--accent, #aaa);
}

.avatar {
  display: block;
  /* Its height, scaled to fit the screen's width: a wide cover shrinks
     whole on a phone instead of running off the edge. */
  /* A real height, so the cover size setting always changes it (a max
     alone did nothing to a cover already under it); contain keeps it
     whole if the screen's width squeezes it. */
  height: calc(96px * var(--cover-scale, 1));
  max-width: calc(100% - 40px);
  width: auto;
  object-fit: contain;
  object-position: left;
  margin: 20px 20px;
}

.intro {
  margin: 0 20px 20px;
}
/* No cover image: the same 20px above the name that the cover has above it. */
.intro:first-child { margin-top: 20px; }

.social-links {
  /* margin: 0 20px 20px; */
  padding: 0;
  list-style: none;
}
.social-links li {
  display: inline;
  margin-right: 0.75em;
}

.name {
  font-size: 1.1em;
}

.entries {
  margin: 0 0 20px;
  padding: 0;
}

details {
  margin: 0 0 10px 20px;
}

/* The # after a title: that entry's own link (templates/cv/index.html). */
.entry-anchor {
  font-weight: normal;
  text-decoration: none;
}

.entry-date {
  font-weight: normal;
  color: #aaa;
  margin-left: 0.4em;
}

details > summary {
  cursor: pointer;
  font-weight: bold;
  /* Browsers treat a summary like a button (Safari won't select in it at
     all): titles are text to copy too. The click that ends a selection
     doesn't open or close the entry (templates/cv/index.html). */
  -webkit-user-select: text;
  user-select: text;
  /* The icon in its own column: a long title's next lines start under
     the title, not under the icon. */
  display: flex;
  align-items: baseline;
}

/* The browser's own ▶ hidden (summary::marker can't be restyled on
   iPhone Safari, which showed ▶ instead of the stars): the icons are in
   the page instead, the owner's pick from the theme settings. */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Same font and size as the title it sits in front of, whatever the
   owner typed there. */
.entry-marker {
  flex: none;
  margin-right: 0.5em;
}
/* Except the default stars, drawn big as they always were. */
.entry-marker .is-star {
  font-size: 20px;
  letter-spacing: -2px;
}
details[open] .entry-marker {
  color: var(--accent, black);
}
details[open] .when-closed,
details:not([open]) .when-open {
  display: none;
}

.entry-body {
  margin: 0.5em 0 0;
}

.entry-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0.5em 0 0;
}

.empty-state {
  padding: 20px 0;
}