/* The blog: the index's search, and a post's hero, option cards, diagram and
   closing call to action. The index's rows are in blog-list.css. */

/* ------------------------------------------------- the language switcher --- */

/* First thing on every blog page, each language named in its own script, so a
   reader who cannot read the page around it still finds theirs. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 3px;
  border-radius: 20px;
  background: var(--fill-2);
}

.lang-switch-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 4px 0 8px;
  color: var(--label-2);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--label-2);
  font-size: var(--footnote);
  font-weight: 510;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fast) var(--ease-out-soft), color var(--fast) var(--ease-out-soft);
}

.lang-switch a:hover {
  color: var(--label);
}

.lang-switch a[aria-current="true"] {
  background: var(--tint-fill);
  box-shadow: inset 0 0 0 0.5px var(--tint-line);
  color: var(--tint);
}

.lang-switch a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--tint), 0 0 0 3px var(--tint-fill);
}

/* A finger, not a pointer: full-size tap targets that still fit four in a row at 360px. */
@media (max-width: 600px), (pointer: coarse) {
  .lang-switch {
    border-radius: 25px;
  }

  .lang-switch a {
    min-height: 44px;
    padding: 0 11px;
  }

  .lang-switch-icon {
    margin: 0 2px 0 6px;
  }
}

/* ------------------------------------------------------------- the index --- */

.blog-search {
  max-width: 560px;
  margin-top: 28px;
}

.blog-search .field {
  margin-top: 0;
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.topic-chip {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--label-2);
  font-size: var(--footnote);
  font-weight: 510;
  cursor: pointer;
  transition: background var(--fast) var(--ease-out-soft), color var(--fast) var(--ease-out-soft);
}

.topic-chip:hover {
  color: var(--label);
}

.topic-chip[aria-pressed="true"] {
  background: var(--tint-fill);
  box-shadow: inset 0 0 0 0.5px var(--tint-line);
  color: var(--tint);
}

.blog-status {
  margin: 40px 0 0;
  color: var(--label-2);
  font-size: var(--footnote);
  font-weight: 510;
  letter-spacing: var(--track-footnote);
}

.blog-empty {
  margin: 14px 0 0;
  color: var(--label-2);
}

/* ------------------------------------------------- the phone as cover art --- */

/* The top of the phone only: the notification and the session, fading out
   before the key row so the drawing stays a picture, not a second page. */
.post-cover {
  position: relative;
  display: grid;
  justify-items: center;
  height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.post-cover .mobile-device {
  --mobile-device-w: 216px;
}

/* ------------------------------------------------------------ a post page --- */

.post-hero {
  display: grid;
  gap: 24px;
  align-items: end;
  margin-bottom: 40px;
}

.post-hero .lede {
  max-width: 34ch;
}

@media (min-width: 820px) {
  /* The phone starts level with the byline and ends by the lede, so it sits
     beside the title instead of rising above it. */
  .post-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 48px;
  }

  .post-hero .post-cover {
    height: 400px;
    margin-top: 28px;
  }

  /* zoom, not a wider frame: the mockup sets its text in pixels for its own
     width, so only scaling the whole phone keeps the screen filled. */
  .post-hero .post-cover .mobile-device {
    --mobile-device-w: 252px;
    zoom: 1.25;
  }
}

.post-back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--label-2);
  font-size: var(--footnote);
  text-decoration: none;
}

.post-back:hover {
  color: var(--tint);
}

.post-meta {
  color: var(--label-3);
  font-size: var(--footnote);
  letter-spacing: var(--track-footnote);
}

/* The three options, side by side, before the long form. */
.option-grid {
  display: grid;
  gap: 12px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.option-card {
  padding: 20px 22px;
  border-radius: var(--r-group);
  background: var(--surface);
  box-shadow: var(--highlight);
}

.option-card.is-pick {
  background: var(--tint-fill);
  box-shadow: inset 0 0 0 0.5px var(--tint-line);
}

.option-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--label);
  font-size: var(--caption);
  font-weight: 700;
}

.option-card.is-pick .option-num {
  background: var(--tint);
  color: var(--on-accent);
}

.option-title {
  margin: 14px 0 0;
  font-size: var(--headline);
  letter-spacing: var(--track-body);
}

.option-grid .option-card .option-title a {
  color: var(--label);
  text-decoration: none;
}

.option-grid .option-card .option-title a:hover {
  color: var(--tint);
}

.option-card p {
  margin: 6px 0 0;
  color: var(--label-body);
  font-size: var(--callout);
  line-height: 1.5;
}

.option-card .option-verdict {
  margin-top: 14px;
  font-size: var(--footnote);
  font-weight: 600;
}

.option-verdict::before {
  margin-right: 6px;
}

.option-verdict.is-no {
  color: var(--orange);
}

.option-verdict.is-no::before {
  content: "\2715";
}

.option-verdict.is-yes {
  color: var(--green-ink);
}

.option-verdict.is-yes::before {
  content: "\2713";
}

.option-card .option-cost {
  margin-top: 4px;
  color: var(--label-3);
  font-size: var(--footnote);
}

/* A grid column grows to fit its widest child unless told not to; without this
   the diagram's minimum width pushed the whole post sideways on a phone. */
.index-layout > .prose {
  min-width: 0;
}

.prose details.faq {
  margin-top: 14px;
}

.post-note {
  margin-top: 32px;
  color: var(--label-2);
  font-size: var(--footnote);
}

/* The diagram in a post: drawn from the theme's tokens, so it follows light and dark. */
/* Framed like a card, so at a glance it reads as a picture, not more text. */
.post-figure {
  margin: 28px 0;
  padding: 22px 24px 18px;
  border-radius: var(--r-group);
  background: var(--well);
  box-shadow: inset 0 0 0 0.5px var(--hairline-strong);
}

/* Drawn narrow enough to read on a phone; the scroll box only catches a very small screen. */
.post-figure .figure-scroll {
  overflow-x: auto;
}

.post-figure svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.post-figure figcaption {
  margin-top: 10px;
  color: var(--label-2);
  font-size: var(--footnote);
}

.fig-box {
  fill: var(--surface);
  stroke: var(--hairline-strong);
}

.fig-dead {
  fill: var(--red-fill);
  stroke: var(--red);
}

.fig-live {
  fill: var(--green-fill);
  stroke: var(--green);
}

.fig-wire {
  stroke: var(--label-3);
  stroke-width: 2;
}

.fig-cut {
  stroke-dasharray: 6 6;
}

.fig-text {
  fill: var(--label);
  font-size: 15px;
}

.fig-label {
  fill: var(--label-2);
  font-size: 14px;
  font-weight: 600;
}

.fig-note {
  fill: var(--label-3);
  font-size: 12px;
}

/* ------------------------------------------------- the closing call to act --- */

.blog-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
  padding: 28px 32px;
  border-radius: var(--r-panel);
  background: radial-gradient(90% 140% at 100% 0%, var(--tint-fill), transparent 70%), var(--surface);
  box-shadow: var(--highlight);
}

.blog-cta h2 {
  margin: 0;
  font-size: var(--title-3);
  letter-spacing: var(--track-title-3);
}

.blog-cta p {
  margin: 6px 0 0;
  color: var(--label-2);
}