/* Site styles: layout knobs and the sidebar calendar, all built on Web Awesome tokens. */

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

wa-page {
  --menu-width: 19rem;
}

wa-page[view='mobile'] {
  --menu-width: auto;
}

/* Header ------------------------------------------------------------------ */

.brand {
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: var(--wa-font-size-l);
}

.brand wa-icon {
  color: var(--wa-color-brand-fill-loud);
}

/* wa-page lays out the navigation header as a column; keep icon and title on
   one row, start-aligned, in both the sidebar and the mobile drawer. */
.nav-brand {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
}

/* The brand always heads the sidebar (and the mobile drawer). The header only
   carries the brand and calendar toggle on mobile; on desktop it goes away. */
wa-page[view='desktop'] > [slot='header'] {
  display: none;
}

/* Main column ------------------------------------------------------------- */

/* The navigation column pads both sides with --wa-space-m, so the main region
   starts one token past the calendar's visual edge. Pad the far side to match
   so a centered <main> sits evenly between the calendar and the viewport. */
wa-page[view='desktop']::part(main) {
  padding-inline-end: var(--wa-space-m);
}

/* Line the top of the main column up with the top of the calendar, which sits
   --wa-space-m below the header rather than the default --wa-space-3xl. */
wa-page[view='desktop'] main {
  padding-block-start: var(--wa-space-m);
}

main {
  inline-size: 100%;
  max-inline-size: 126ch;
  margin-inline: auto;
}

.page-head h1 {
  margin: 0;
}

.day-head h2 {
  margin: 0;
}

.day-head h2 a {
  color: inherit;
  text-decoration: none;
}

.day-head h2 a:hover {
  color: var(--wa-color-text-link);
}

/* Video cards ------------------------------------------------------------- */

.video-head {
  display: flex;
  align-items: flex-start;
  gap: var(--wa-space-m);
}

.video-head-text {
  flex: 1 1 0;
  min-inline-size: 0;
}

.video-thumb {
  position: relative;
  flex: 0 0 auto;
  inline-size: clamp(7rem, 28%, 11rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}

.video-thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* YouTube pads some sizes to 4:3 with black bars; covering a 16:9 box crops them off. */
  object-fit: cover;
}

.video-thumb-duration {
  position: absolute;
  inset-inline-end: var(--wa-space-2xs);
  inset-block-end: var(--wa-space-2xs);
  padding: 0 var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-s);
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font-size: var(--wa-font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .video-head {
    flex-direction: column;
  }

  .video-thumb {
    inline-size: 100%;
  }
}

.video-title {
  margin: 0;
  line-height: var(--wa-line-height-condensed);
}

.video-title a {
  color: inherit;
  text-decoration: none;
}

.video-title a:hover {
  color: var(--wa-color-text-link);
}

.video-meta {
  color: var(--wa-color-text-quiet);
}

/* Where the transcript came from: secondary detail, so keep the badge quiet. */
.source-badge {
  --border-color: var(--wa-color-surface-border);
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-normal);
  opacity: 0.6;
}

.tldr {
  margin: 0;
}

/* Read status sits right after the title, on its last line, centred on the
   title's capitals. vertical-align: middle centres on its lowercase letters
   instead; the translate lifts by the rest, half the gap between cap height
   and x-height (about 0.085 of the title's font size). */

/* Reading position: the badge exists on every card but only shows on the
   bookmarked one. Sized like the meta row, not the heading it sits in, so its
   em is smaller: 0.115em of the badge is that same lift. */
.video-title .bookmark-badge {
  /* Same gap as between the thumbnail and the title (.video-head). */
  margin-inline-start: var(--wa-space-m);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-normal);
  vertical-align: middle;
  translate: 0 -0.115em;
}

.video:not(.bookmarked) .bookmark-badge {
  display: none;
}

/* bookmark.js adds .unread to cards not read yet, which shows a blue dot.
   Hidden until then, so read cards don't flash it while the script loads. */
.unread-dot {
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-start: 0.4em;
  border-radius: 50%;
  background: var(--wa-color-blue-50);
  vertical-align: middle;
  translate: 0 -0.085em;
}

.video:not(.unread) .unread-dot {
  display: none;
}

/* Star toggle, after the unread dot: an outline star, filled once bookmark.js
   marks the card .starred. A bare button so it sits in the title's line like
   the dot; sized and lifted the same way. */
.star-toggle {
  display: inline-flex;
  margin: 0;
  margin-inline-start: 0.4em;
  padding: 0.1em;
  border: 0;
  border-radius: var(--wa-border-radius-s);
  background: none;
  color: var(--wa-color-text-quiet);
  font-size: 0.7em;
  line-height: 1;
  vertical-align: middle;
  translate: 0 -0.085em;
  cursor: pointer;
}

.star-toggle:hover {
  color: var(--wa-color-yellow-60);
}

.star-toggle:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}

.video.starred .star-toggle {
  color: var(--wa-color-yellow-70);
}

/* Compact cards on month indexes show only the first lines of the summary. */
.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.read-more {
  align-self: flex-start;
}

.points {
  margin: 0;
  padding-inline-start: var(--wa-space-l);
}

/* The callout's play icon is a link to the same moment as the timestamp. */
.highlight-play {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.highlight-play:hover {
  color: var(--wa-color-text-link);
}

.highlight-why {
  margin: 0;
}

/* Web Awesome pads native blockquotes on every side; keep only the left gutter. */
.highlight blockquote,
wa-details blockquote {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--wa-space-s);
  border-inline-start: var(--wa-border-width-m) solid var(--wa-color-brand-border-quiet);
  color: var(--wa-color-text-quiet);
  font-style: italic;
}

.stamp {
  font-variant-numeric: tabular-nums;
  font-weight: var(--wa-font-weight-semibold);
  white-space: nowrap;
}

.skipped ul {
  margin: 0;
  padding-inline-start: var(--wa-space-l);
}

/* Calendar ---------------------------------------------------------------- */

.cal {
  inline-size: 100%;
}

/* Only days with content are selectable; keep the rest quiet but legible. */
.cal::part(day-disabled) {
  opacity: 0.5;
}

.cal-mark {
  position: relative;
  font-weight: var(--wa-font-weight-semibold);
}

/* Markers under the day number, both added by bookmark.js: a blue dot
   (::before) on days with unread summaries, like the cards' dot, and a
   bookmark (::after) on the day holding the reading position. Days without
   summaries are already disabled, so they need no marker. */
.cal-mark.unread::before,
.cal-mark.bookmarked::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
}

.cal-mark.unread::before {
  inset-block-end: -0.45em;
  inline-size: 0.3em;
  block-size: 0.3em;
  border-radius: 50%;
  background: var(--wa-color-blue-50);
}

.cal-mark.bookmarked::after {
  inset-block-end: -0.55em;
  inline-size: 0.45em;
  block-size: 0.45em;
  border-radius: 0.1em 0.1em 0 0;
  background: var(--wa-color-brand-fill-loud);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 65%, 0 100%);
}

/* A day with both sets them side by side. */
.cal-mark.unread.bookmarked::before {
  translate: -0.3em 0;
}

.cal-mark.unread.bookmarked::after {
  translate: 0.3em 0;
}

/* The selected day sits on a brand-coloured fill, which would swallow the red
   bookmark and muddy the blue dot; draw both in white there. */
.cal-mark.selected::before,
.cal-mark.selected::after {
  background: var(--wa-color-brand-on-loud, #fff);
}

/* Starred ----------------------------------------------------------------- */

.starred-link {
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.starred-link:hover {
  color: var(--wa-color-text-link);
}

.starred-link wa-icon {
  color: var(--wa-color-yellow-70);
}

.starred-link[aria-current='page'] {
  font-weight: var(--wa-font-weight-semibold);
}

/* The page holds a card for every recent video; only starred ones show, plus
   any unstarred during this visit, dimmed until the next load (bookmark.js). */
.starred-list > .video:not(.starred, .kept) {
  display: none;
}

.starred-list > .video.kept:not(.starred) {
  opacity: 0.6;
}

.starred-missing-list {
  margin: 0;
  padding-inline-start: var(--wa-space-l);
  font-family: var(--wa-font-family-code);
}

#starred-missing p,
#starred-empty p {
  margin: 0;
}

/* Archive list ------------------------------------------------------------ */

/* Build time, just under the date picker. */
.built {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.archive-title {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.archive {
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive li {
  align-items: center;
}

.archive a[aria-current='page'] {
  font-weight: var(--wa-font-weight-semibold);
}

/* Bookmark sync ----------------------------------------------------------- */

/* Settings gear then status text, on one left-aligned row. (wa-page lays its
   navigation-footer children out in a column, so set the direction back.) */
.sync {
  inline-size: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.sync-status {
  color: var(--wa-color-text-quiet);
}

.sync-status.sync-failed {
  color: var(--wa-color-danger-fill-loud);
}

/* Empty state ------------------------------------------------------------- */

.empty {
  max-inline-size: 60ch;
}

/* Pager ------------------------------------------------------------------- */

.pager {
  align-items: center;
}