/* /automate/apps.css — the per-app hub pages ("How to Automate <App>").
   Loaded after automate.css, so the template grid (.agl-grid) and the cards
   (.tpl-card*) come for free and the cards look identical to the gallery.
   Everything here is prefixed .wra- (WebRun app hub). */

/* ---------- Hero ---------- */
.wra-hero {
  padding: 8.5rem 2rem 2.5rem;
  background: var(--cream);
}
/* Same 1140px box as the article grid, with the text capped at the article
   column's width, so the H1, the lede, the byline and the body copy all sit on
   one left edge and the rail lines up to their right. */
.wra-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.wra-hero-inner > * { max-width: 760px; }

/* Breadcrumb. style.css styles the bare `nav` selector as the floating navbar
   pill (width 80%, 16px radius, blur, shadow), so ANY <nav> on the page inherits
   it. Same reset the gallery pagination uses: keep the element semantic, drop the
   chrome. Do not "fix" this by touching the global rule - the header depends on it. */
.wra-crumb {
  width: auto;
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* The global rule is `justify-content: space-between`, which would fling the
     crumbs to the full width of the column. */
  justify-content: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.wra-crumb a { color: var(--text-muted); text-decoration: none; }
.wra-crumb a:hover { color: var(--forest); text-decoration: underline; }
.wra-crumb svg { opacity: 0.5; flex-shrink: 0; }

.wra-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0 0 1.1rem;
  font-weight: 400;
}

/* The answer-first lede: the 40-60 words an AI answer engine is most likely to
   lift, so it sits above the fold and above the byline. */
.wra-answer {
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--text);
  margin: 0 0 1.9rem;
}
.wra-answer strong { color: var(--charcoal); font-weight: 600; }

/* ---------- Byline ---------- */
.wra-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.wra-person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.wra-avatar { flex-shrink: 0; display: block; line-height: 0; }
/* No object-fit here, by decision: the avatar is shown as authored, and a file that
   is the wrong shape shows as the wrong shape rather than being silently cropped
   into looking correct.

   That puts the requirement on the FILES, which is where avatars/README.md already
   puts it: square, 320px minimum. Ship anything else and it distorts, because a
   40x40 box with no object-fit squeezes the image to fit rather than cropping it.
   The 20 files in the folder today are 700x900, so they render about a fifth too
   narrow for their height until they are re-cropped square. */
.wrb-avatar-svg, .wrb-avatar-img { display: block; border-radius: 50%; }
.wra-person-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wra-person-kicker {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--text-muted);
}
.wra-person-name { font-size: 0.9rem; font-weight: 600; color: var(--charcoal); }
.wra-person-role { font-size: 0.78rem; color: var(--text-muted); }
.wra-byline-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.wra-dot { opacity: 0.45; }

/* ---------- Article ---------- */
.wra-article {
  padding: 2.75rem 2rem 0;
}

/* Two columns: the article, and the Related rail. The grid is centred on the same
   1140px box the hero uses, and the text column is capped at the hero's 760px, so
   the H1 above and the body text below share one left edge. */
.wra-article-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 760px) 300px;
  gap: 3.5rem;
  align-items: start;
}
.wra-article-inner { min-width: 0; }

/* ---------- Related rail ---------- */
.wra-related { min-width: 0; }
.wra-related-sticky {
  position: sticky;
  /* Clears the docked header (72px) plus a little air. */
  top: 96px;
}
.wra-related-h {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.wra-related-list { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.wra-related-item { margin: 0 0 0.15rem; }

/* One anchor per card wraps the icon, title and description, so the whole card is
   a single click target with one hover state. Negative side margin lets the hover
   fill bleed past the text column without shifting the text itself. */
.wra-related-link {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 -0.7rem;
  padding: 0.75rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.wra-related-link:hover {
  background: var(--white);
  border-color: rgba(0, 0, 0, 0.09);
  transform: translateX(2px);
}
.wra-related-link:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.wra-related-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  color: var(--text-muted);
  transition: border-color 0.18s ease;
}
.wra-related-ic img { width: 20px; height: 20px; display: block; }
.wra-related-ic svg { width: 18px; height: 18px; }
.wra-related-link:hover .wra-related-ic { border-color: rgba(0, 0, 0, 0.16); }

.wra-related-txt { min-width: 0; }
.wra-related-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--charcoal);
}
.wra-related-link:hover .wra-related-title { color: var(--forest); }
.wra-related-desc {
  display: -webkit-box;
  margin: 0.3rem 0 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-muted);
  /* Descriptions are meta descriptions, so up to 155 chars. Clamp keeps every
     rail card the same height regardless of how long the copy runs. */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wra-related-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}
.wra-related-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Scoped to .wra-article-inner, NOT .wra-article. The Related rail is a sibling
   inside the same section, and its <h2> and <p> would otherwise inherit the serif
   article heading and the 1.03rem body size, which beat the rail's own classes on
   specificity (0,1,1 vs 0,1,0). */
.wra-article-inner h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 2.6rem 0 0.95rem;
}
.wra-article-inner h2:first-child { margin-top: 0; }
.wra-article-inner p {
  font-size: 1.03rem;
  line-height: 1.72;
  color: var(--text);
  margin: 0 0 1.15rem;
}
.wra-article-inner p a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }

/* Pull-out strip: the three jobs in this app most worth automating. Reader-facing
   outcomes only. Catalog counts are banned here, see pipeline/APP-ARTICLE-SPEC.md. */
.wra-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2rem 0 2.4rem;
}
.wra-fact { background: var(--white); padding: 1.25rem 1.2rem; }
.wra-fact-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--forest);
}
.wra-fact-lbl {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The app's screen, banded on top of the strip so the two read as one object: the
   product, then the three jobs in it. The unit owns the outer margin and the
   media owns the top corners, so the strip below squares off and the two share
   one border instead of stacking two. Same captured shot the workflow cards
   further down the page use. */
.wra-facts-unit { margin: 2rem 0 2.4rem; }
.wra-facts-unit .wra-facts { margin: 0; }
/* Only squared when something actually sits on top of it. The dozen apps with no
   capture yet render the strip alone, and it has to keep all four corners. */
.wra-facts-media + .wra-facts {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.wra-facts-media {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  /* What the shot fades INTO, so it has to be the same surface as the cards
     below. It also holds the frame while the image loads, so the strip never
     jumps. */
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.wra-facts-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top of the page, where the product's own name and headline are. Centring the
     crop would land on whatever marketing section happens to sit mid-page. */
  object-position: top center;
  /* The crop always lands mid-sentence in somebody's marketing copy, and a hard
     cut against the strip reads as a mistake. Dissolving the last third into the
     card surface joins the screen and the three jobs into one object.
     A wash was tried first and cut: darkening a mostly-white homepage turns it
     grey, which looks like a rendering fault rather than a decision. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.3) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.3) 86%, transparent 100%);
}
/* Names the app on top of its own screen, so the image is captioned without a
   caption line. Bordered rather than shadowed: it lands in the faded zone, where
   a shadow has nothing to sit against. */
.wra-facts-badge {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.75rem 0.34rem 0.42rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--charcoal);
}
.wra-facts-badge img { display: block; width: 20px; height: 20px; border-radius: 5px; }

/* ---------- FAQ ---------- */
.wra-faq { margin: 2.8rem 0 0.5rem; }
.wra-faq-item {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  padding: 1.15rem 0;
}
.wra-faq-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.09); }
.wra-faq-q {
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 0.45rem;
}
.wra-faq-a { font-size: 0.97rem; line-height: 1.65; color: var(--text); margin: 0; }

/* ---------- Answer-shaped article furniture ----------
   Three optional blocks a beat can carry. All are authored per app, so any of them
   may be absent; none of them may look like a placeholder when it is. */

/* The question a beat answers, sitting under its declarative heading. Styled as a
   quiet lede rather than a heading, so the H2 above keeps the article's voice. */
.wra-q {
  margin: -0.35rem 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  font-style: italic;
}

/* Comparison table. The wrapper scrolls on its own so a wide table never makes the
   page scroll sideways on a phone. */
.wra-table-wrap {
  margin: 1.8rem 0 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wra-table-cap {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
}
.wra-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
}
.wra-table th,
.wra-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wra-table thead th {
  background: var(--cream);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  white-space: nowrap;
}
.wra-table tbody th {
  font-weight: 600;
  color: var(--charcoal);
}
.wra-table tbody td { color: var(--text); }
.wra-table tbody tr:last-child th,
.wra-table tbody tr:last-child td { border-bottom: 0; }

/* The one sentence worth quoting on its own. */
.wra-takeaway {
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--forest);
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.wra-takeaway-lbl {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--forest);
}

/* Sources. Deliberately plain: a reference list, not a callout. */
.wra-sources { margin: 2.6rem 0 0.5rem; }
.wra-sources h2 { font-size: 1.05rem; }
.wra-sources-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.wra-sources-list li { margin-bottom: 0.5rem; }
.wra-sources-list a { color: var(--forest); text-decoration: underline; }
.wra-source-note { color: var(--text-muted); }
.wra-source-note::before { content: ' '; }

@media (max-width: 640px) {
  .wra-table { min-width: 26rem; font-size: 0.86rem; }
  .wra-table th, .wra-table td { padding: 0.55rem 0.65rem; }
}

/* ---------- Template list ---------- */
.wra-list { padding: 3.5rem 2rem 1rem; }
.wra-list-head {
  max-width: 1180px;
  margin: 0 auto 1.6rem;
}
.wra-list-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
}
.wra-list-sub { font-size: 0.98rem; color: var(--text-muted); margin: 0; max-width: 720px; }

/* Note: the generated index still records each template's `role` (source / step /
   target). Nothing renders it on the card now - a per-card pill was tried and cut,
   because ~62% of a big app's cards land on the same value and it reads as noise.
   The split is stated once, in the article's fact strip, where it means something. */

/* Below ~1080px there is no room for a 300px rail beside a readable text column,
   so it drops under the article and becomes a plain list. Sticky is switched off
   with it: a sticky element in a single-column flow just pins mid-scroll. */
@media (max-width: 1080px) {
  .wra-article-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 780px; }
  .wra-hero-inner { max-width: 780px; }
  .wra-hero-inner > * { max-width: none; }
  .wra-related-sticky { position: static; }
  .wra-related { border-top: 1px solid rgba(0, 0, 0, 0.09); padding-top: 1.75rem; }
}

@media (max-width: 720px) {
  .wra-hero { padding: 7rem 1.25rem 2rem; }
  .wra-article { padding: 2rem 1.25rem 0; }
  .wra-list { padding: 2.5rem 1.25rem 1rem; }
  .wra-byline { gap: 1rem; }
  .wra-byline-meta { margin-left: 0; width: 100%; }
  .wra-facts { grid-template-columns: 1fr; }
  /* 3:1 on a phone column is a 110px letterbox showing a sliver of the page.
     Taller crop, so the app is still recognisable. */
  .wra-facts-media { aspect-ratio: 2 / 1; }
}

/* ---------- /automate/apps: the guide directory ----------
   A vertical, paginated list read as a blog index: one guide per row, app icon +
   the app as the post title + its one-line standby + the author who wrote the
   guide. No template count anywhere on a row. Everything below is a single-class
   selector on purpose. Broad descendant selectors here (.wra-dir h2, .wra-dir p)
   would beat the component classes on specificity exactly the way .wra-article's
   did before they were scoped to .wra-article-inner, and this file also loads on
   all 541 guide pages. */
/* Top padding is deliberately lighter than .wra-list's 3.5rem: the hero above
   already carries 2.5rem of its own, and the search box wants to read as the top
   of the list rather than as a second section. */
.wra-dir { padding: 1.75rem 2rem 1rem; }
.wra-dir-browse { max-width: 1140px; margin: 0 auto 1.5rem; }
.wra-dir-browse .agl-search { margin-bottom: 0.9rem; }
.wra-dir-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  min-height: 1.5rem;
}
.wra-dir-count-line { font-size: 0.86rem; color: var(--text-muted); margin: 0; }
.wra-dir-count-line strong { color: var(--charcoal); font-weight: 600; }

/* ---- The rows ---- */
.wra-dir-list { list-style: none; max-width: 1140px; margin: 0 auto; padding: 0; }
.wra-dir-item + .wra-dir-item { border-top: 1px solid rgba(0, 0, 0, 0.07); }

/* One anchor per row wraps the icon, the title, the standby line and the byline,
   so the whole post is a single click target with one hover state. Top-aligned,
   not centred: a row is three lines now, and a vertically centred icon floats
   away from the name it labels. */
.wra-dir-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 1rem;
  padding: 1.05rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
.wra-dir-row:hover {
  background: var(--white);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}
.wra-dir-row:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

.wra-dir-ic {
  width: 40px;
  height: 40px;
  /* Optical nudge: the serif title's half-leading leaves it sitting a touch below
     the icon's top edge otherwise. */
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  color: var(--text-muted);
  transition: border-color 0.16s ease;
}
.wra-dir-ic img { width: 22px; height: 22px; display: block; }
.wra-dir-ic svg { width: 19px; height: 19px; }
.wra-dir-row:hover .wra-dir-ic { border-color: rgba(0, 0, 0, 0.16); }

.wra-dir-txt { min-width: 0; }
/* The post title. Serif, and the same family and weight the guide's own H1 uses,
   so the row promises the page it opens. It carries the row: at the old sans
   0.98rem/600 it weighed the same as its own description. */
.wra-dir-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.wra-dir-row:hover .wra-dir-name { color: var(--forest); }
/* The standby line. Two lines, not one truncated line: these are meta
   descriptions (median 112 chars), and clipping them mid-sentence at 1140px threw
   away the half of the sentence that says what the guide is for. */
.wra-dir-desc {
  display: -webkit-box;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The byline. Deliberately quieter than both lines above it: it is provenance, a
   reason to trust the guide, not the reason to open it. */
.wra-dir-by {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.wra-dir-author { color: var(--text); font-weight: 600; }
.wra-dir-arrow {
  align-self: center;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.wra-dir-row:hover .wra-dir-arrow { opacity: 1; transform: translateX(0); color: var(--forest); }

/* ---- The foot: pagination, then the A-Z rail ----
   The rail is a real filter (?letter=C) rather than a #anchor, and it lives down
   here rather than under the search box: 27 round chips directly below the box
   read as a pagination bar sitting on top of a list nobody has looked at yet.
   Centred, so it and .agl-pagination above it read as one navigation cluster. */
.wra-az-foot {
  max-width: 1140px;
  margin: 2.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.wra-az-label {
  margin: 0 0 0.85rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
}
/* It is a <nav>, and style.css styles the bare `nav` selector as the floating
   navbar pill (width 80%, 100px radius, blur, shadow), so it needs the same reset
   .wra-crumb and .agl-pagination use. Do not "fix" this by touching the global
   rule, the header depends on it. */
.wra-az-rail {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  /* The global rule is `justify-content: space-between`, which would spread 27
     letters across the full width. */
  justify-content: center;
  gap: 0.3rem;
}
.wra-az-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.5rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.09);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wra-az-link:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.wra-az-link.is-active { background: var(--forest); color: var(--cream); border-color: var(--forest); }
/* A letter with nothing behind it under the current search renders as a disabled
   span, not a link, so no chip in the rail is ever a dead end. */
.wra-az-link.is-empty {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 640px) {
  .wra-dir { padding: 1.5rem 1.25rem 1rem; }
  .wra-dir-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem 0.6rem;
  }
  .wra-dir-ic { width: 34px; height: 34px; }
  .wra-dir-name { font-size: 1.1rem; }
  .wra-dir-desc { font-size: 0.86rem; -webkit-line-clamp: 3; }
  /* No room for a hover affordance on a touch screen, and the whole row is the
     target anyway. */
  .wra-dir-arrow { display: none; }
  .wra-az-foot { margin-top: 2rem; padding-top: 1.4rem; }
}