/* 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);
}

/* 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);
}

.tldr {
  margin: 0;
}

/* Reading position: the badge exists on every card but only shows on the
   bookmarked one. */
.video:not(.bookmarked) .bookmark-badge {
  display: none;
}

/* 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);
}

/* A dot under the number marks days that have summaries. */
.cal-mark.has-videos::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.45em;
  margin-inline: auto;
  inline-size: 0.3em;
  block-size: 0.3em;
  border-radius: 50%;
  background: currentColor;
}

/* A bookmark icon replaces the dot on the day holding the reading position. */
.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%);
}

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

.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;
}