/* The blog: the list of posts and a post (both written by the Worker, src/blog.js).
   The top bar is the home page's (home.css), the foot is the site's (base.css, src/foot.js). */
.nav-links a[aria-current] {
  color: var(--ink);
}

/* The other language, when the page exists in it: two letters in the top bar */
.nav .lang-link {
  min-width: 2.75rem;
  font-weight: 700;
  text-decoration: none;
}

.page-note {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.875rem;
  border-left: 3px solid var(--warn);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--warn);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---- The list ---- */
.blog-list {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
  padding-block: 1.5rem 1rem;
}

.list-head {
  max-width: 46rem;
}

.post-title {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.post-lead {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The topics: radio buttons dressed as chips. The list follows the one picked, with CSS alone (:has). */
.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  border: 0;
}

/* On a phone the chips are one row that scrolls sideways inside itself: the page never gets wider */
@media (max-width: 39.99rem) {
  .topics {
    flex-wrap: nowrap;
    margin-inline: -1.25rem;
    padding: 0.375rem 1.25rem; /* room for the focus ring, which the scroll would cut */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topics label {
    flex: none;
  }
}

.topics input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.topics label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.topics label small {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.topics label:hover {
  border-color: var(--ink);
}

.topics input:checked + label {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.topics input:checked + label small {
  color: inherit;
  opacity: 0.7;
}

.topics input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@supports not selector(:has(*)) {
  .topics {
    display: none;
  }
}

.blog-list:has(#t-card:checked) [data-topic]:not([data-topic="card"]),
.blog-list:has(#t-qr:checked) [data-topic]:not([data-topic="qr"]),
.blog-list:has(#t-menu:checked) [data-topic]:not([data-topic="menu"]),
.blog-list:has(#t-review:checked) [data-topic]:not([data-topic="review"]),
.blog-list:has(#t-wifi:checked) [data-topic]:not([data-topic="wifi"]) {
  display: none;
}

/* Posts as cards: the list, and "Keep reading" under a post */
.posts {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s, translate 0.2s var(--ease);
}

.pc-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background-color: var(--tint);
}

/* No cover yet: a dot grid in the topic's own colour and the topic's icon, never an empty frame (a plain tint where color-mix is unknown).
   Each topic has its hue, lighter in the dark theme; the icon on its white tile stands 3 to 1 at least in both. */
[data-topic] {
  --topic: #2450e6;
  --dots: 30%;
}

[data-topic="qr"] {
  --topic: #6d28d9;
}

[data-topic="menu"] {
  --topic: #c2410c;
}

[data-topic="review"] {
  --topic: #be185d;
}

[data-topic="wifi"] {
  --topic: #0e7490;
}

:root[data-theme="dark"] [data-topic] {
  --topic: #8fa8ff;
  --dots: 42%;
}

:root[data-theme="dark"] [data-topic="qr"] {
  --topic: #b9a0ff;
}

:root[data-theme="dark"] [data-topic="menu"] {
  --topic: #ff9d6e;
}

:root[data-theme="dark"] [data-topic="review"] {
  --topic: #ff8dbd;
}

:root[data-theme="dark"] [data-topic="wifi"] {
  --topic: #5fd0e6;
}

.pc-none {
  display: grid;
  place-items: center;
  color: var(--topic, var(--accent-text));
  background: var(--tint);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--topic) var(--dots), transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(135deg, color-mix(in srgb, var(--topic) 18%, var(--surface)), color-mix(in srgb, var(--topic) 5%, var(--surface)));
}

.pc-none .icon {
  box-sizing: content-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.875rem;
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem 1.25rem;
}

.pc-topic,
.post-topic {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.post-topic {
  padding: 0.25rem 0.75rem 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--tint);
}

.post-card :is(h2, h3, b) {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pc-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9375rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card small {
  margin-top: auto;
  padding-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (hover: hover) {
  .post-card:hover {
    border-color: color-mix(in srgb, var(--ink) 25%, var(--line));
    box-shadow: var(--shadow);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .post-card:hover {
    translate: 0 -2px;
  }
}

@media (min-width: 40rem) {
  .posts.grid,
  .more .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .posts.grid,
  .more .posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-list {
    padding-block: 3rem 1rem;
  }
}

/* The newest post, large: the first of the list while no topic is picked (with one topic only there are no chips, and it is large too).
   Its cover beside its words; without a cover the drawn one takes the narrower side, so no half of the card is empty. */
@media (min-width: 48rem) {
  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child {
    grid-column: 1 / -1;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .post-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .post-card:has(.pc-none) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .pc-cover {
    height: 100%;
    min-height: 15rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .pc-none .icon {
    width: 3.5rem;
    height: 3.5rem;
    padding: 1.125rem;
    border-radius: 1.5rem;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .pc-body {
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 2.25rem;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child h2 {
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child .pc-text {
    font-size: 1.0625rem;
    -webkit-line-clamp: 5;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child small {
    margin-top: 0.5rem;
  }
}

/* From 64rem, six tracks: three cards a row, and so that no row ends half empty, the posts right under the large one
   go two by two (one pair when the others leave two over, two pairs when they leave one) */
@media (min-width: 64rem) {
  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li {
    grid-column: span 2;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child {
    grid-column: 1 / -1;
  }

  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child:nth-last-child(3n + 3) ~ li:nth-child(-n + 3),
  .blog-list:not(:has(.topics input:not(#t-all):checked)) .posts.grid:has(> [data-topic]) > li:first-child:nth-last-child(3n + 2) ~ li:nth-child(-n + 5) {
    grid-column: span 3;
  }
}

/* ---- A post ---- */
/* The width of the top bar and the foot (.wrap), so the page keeps one left edge; the text keeps its own measure (.prose) */
.post {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
  padding-block: 0.5rem 0;
}

.post-head {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  max-width: 46rem;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.crumb:hover {
  color: var(--ink);
}

.post-head .post-lead {
  margin: 0;
  font-size: 1.1875rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1.25rem;
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.post-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 2rem;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--tint);
}

/* One column on a phone that never grows past the screen: a wide table or a code block scrolls inside its own box */
.post-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

/* The text: what the Worker writes from its Markdown (src/markdown.js). About 70 characters a line. */
.prose {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.prose > * {
  margin-block: 0;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  margin-top: 3rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}

.prose :is(h2, h3) + * {
  margin-top: 0.75rem;
}

.prose a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose strong {
  font-weight: 700;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose li::marker {
  color: var(--accent-text);
  font-weight: 700;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  background: var(--tint);
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 0.375rem;
  background: var(--tint);
  font-size: 0.875em;
}

.prose pre {
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--tint);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  background: none;
}

.table-box {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.prose th {
  background: var(--bg);
  font-size: 0.875rem;
  font-weight: 700;
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* The box: the product the post is about. At the end on a phone, beside the text (and in sight) on a wide screen. */
.tool-box {
  display: grid;
  gap: 0.875rem;
  justify-items: start;
  align-self: start;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--r-panel);
  background: var(--tint);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    var(--tint);
}

.tool-box > .icon {
  box-sizing: content-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.625rem;
  border-radius: 0.875rem;
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow);
}

.tool-box h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.tool-box p {
  margin: 0;
  color: var(--muted);
}

.tool-box .btn {
  width: 100%;
  max-width: 100%;
  margin-top: 0.25rem;
  white-space: normal;
}

@media (min-width: 64rem) {
  .post {
    padding-top: 1.5rem;
  }

  .post-body {
    grid-template-columns: minmax(0, 42rem) 21rem;
    justify-content: space-between;
    gap: 4rem;
  }

  .tool-box {
    position: sticky;
    top: 1.5rem;
    margin-top: 0.5rem;
  }

  /* A wide screen: a lower cover, so the first lines of the text are nearer */
  .post-cover {
    aspect-ratio: 2 / 1;
  }
}

.more {
  width: min(100% - 2.5rem, 74rem);
  margin: 4rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.more > h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* On a phone, "Keep reading" is three rows: a small cover, then the topic, the title and the time */
@media (max-width: 39.99rem) {
  .more .post-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .more .pc-cover {
    height: 100%;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .more .pc-none .icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
  }

  .more .pc-body {
    gap: 0.25rem;
    padding: 0.875rem 1rem;
  }

  .more .post-card h3 {
    font-size: 1rem;
  }
}

/* ---- The legal pages (src/legal.js): a post's column, a little smaller, and a table of contents ---- */
.legal .prose {
  font-size: 1.0625rem;
}

.legal .prose h2 {
  margin-top: 2.5rem;
  font-size: 1.375rem;
  scroll-margin-top: 1.5rem;
}

.legal .prose h2:first-child {
  margin-top: 0;
}

.legal .post-body {
  margin-top: 2rem;
}

/* On a phone the contents are a row of small pills above the text */
.toc h2 {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toc ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
}

@media (max-width: 63.99rem) {
  .legal .post-body {
    gap: 2rem;
  }
}

/* A wide screen: a panel in the rail beside the text, in sight while it scrolls */
@media (min-width: 64rem) {
  /* The page holds the contents first (read first, as on a phone); here they go in the rail on the right */
  .legal .prose {
    grid-column: 1;
    grid-row: 1;
  }

  .toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    font-size: 0.9375rem;
  }

  .toc ol {
    display: grid;
    gap: 0;
  }

  .toc li a {
    display: block;
    min-height: 0;
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
  }

  .toc li a:hover {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}