/* Cards: Featured tiles, category tiles and the browse list rows share this surface language
   (bordered layer, hairline border that reacts on hover). `.flow-list` is the Developer Center-style
   tile list shared by Browse, the category pages and the Categories index. */

diagram-card {
  position: relative;   /* containing block for the visually-hidden text inside */
  display: flex;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-xl);
  background: var(--color_bg_layer);
  color: var(--color_fg_default);
  cursor: pointer;
  transition: border-color var(--duration-base), background-color var(--duration-base);
}

diagram-card:hover,
diagram-card:focus-visible {
  text-decoration: none;
  border-color: var(--color_border_hover);
  background: var(--color_bg_layer_alternate);
}

/* ---- Mark tile (same construction as the Developer Center tool list) ---- */

.mark {
  flex: none;
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--color_bg_layer_alternate-bold);
}

.mark img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.mark img.is-framed {
  box-sizing: border-box;
  padding: 0.35rem;
  background: #000;
}

/* ---- Text ---- */

.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }

diagram-card h3 {
  margin: 0;
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
}

diagram-card p {
  margin: 0;
  color: var(--color_fg_muted);
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.card-meta {
  margin-top: auto;
  color: var(--color_fg_muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Category pages: the title is the page itself, so the header carries no icon. */

@media (max-width: 575px) {
  diagram-card { gap: var(--space-3); padding: var(--space-3); }
  .mark { width: 3rem; height: 3rem; }
  .mark img { width: 2.125rem; height: 2.125rem; }
}

/* ---- Flow list: tiles from the Developer Center's "More ways to learn" ----
   Measured from developer.auth0.com: a filled 16px-radius tile with 8px padding and no
   border (96px tall), 16px between rows and 32px between columns, an 80px icon container (8px radius) holding the 40px logo, a 24px gap, then a 20px title
   and a smaller description with nothing else. On hover only an arrow follows the
   title. The grid is auto-fill, so the column count follows the container (1 on phones, 2 from
   tablet landscape up) with no breakpoints, and tiles in a row share a height. */

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

.flow-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr));
  gap: var(--space-4) var(--space-6);   /* 16px between rows, 32px between columns (measured) */
}

.flow-list diagram-card,
.flow-list .category-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-2);
  border-width: 0;   /* the reference tile has no border: 80px icon + 2 x 8px padding = 96px */
  border-radius: var(--radius-lg);
  background: var(--color_bg_tile);
  color: var(--color_fg_default);
  cursor: pointer;
  height: 100%;
}

.flow-list .category-card:hover { text-decoration: none; }

/* No hover fill: it would swallow the icon container (the two greys are nearly equal). The arrow after
   the title is the hover cue; keyboard focus keeps the global focus ring. */
.flow-list diagram-card:hover,
.flow-list diagram-card:focus-visible,
.flow-list .category-card:hover,
.flow-list .category-card:focus-visible { background: var(--color_bg_tile); }

.flow-list .mark {
  align-self: center;
  width: 5rem;
  height: 5rem;
  background: var(--color_bg_tile_icon);
}

.flow-list .mark img { width: 2.5rem; height: 2.5rem; }

/* Categories index: a drawn glyph (not a logo) in the same 80px container. */
.flow-list .mark .ui-icon { width: 2rem; color: var(--color_fg_bold); }
.flow-list .mark .ui-icon[data-icon]::before { width: 2rem; height: 2rem; }

.flow-list .card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; padding-block: var(--space-1); overflow-wrap: anywhere; }

.flow-list diagram-card h3,
.flow-list .category-card h2 {
  margin: 0;
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.4;
}

/* The arrow after the title: hidden until the tile is hovered or focused. */
.flow-list diagram-card h3::after,
.flow-list .category-card h2::after {
  content: '\2192';
  content: '\2192' / '';
  display: inline-block;
  margin-left: var(--space-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}

.flow-list diagram-card:hover h3::after,
.flow-list diagram-card:focus-visible h3::after,
.flow-list .category-card:hover h2::after,
.flow-list .category-card:focus-visible h2::after {
  opacity: 1;
  transform: none;
}

.flow-list diagram-card p,
.flow-list .category-card p {
  margin: 0;
  color: var(--color_fg_tile_desc);
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Phones: a slightly smaller icon container keeps the text column readable. */
@media (max-width: 575px) {
  .flow-list diagram-card { gap: var(--space-4); }
  .flow-list .mark { width: 4rem; height: 4rem; }
  .flow-list .mark img { width: 2rem; height: 2rem; }
  .flow-list diagram-card h3,
  .flow-list .category-card h2 { font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-list diagram-card h3::after,
  .flow-list .category-card h2::after { transform: none; transition: opacity var(--duration-base); }
}

.chip {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--color_border_default);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.17em;
}

/* In a tile the text column can be narrower than the word when the reader has enlarged text: let it break. */
.card-body .chip { white-space: normal; overflow-wrap: anywhere; }

/* Deprecated: the brand coral -> pink as a translucent wash with a gradient hairline (the border is a
   masked ::before, so it keeps the pill radius and never fights the tile's hover background). */
.chip-danger {
  position: relative;
  border-color: transparent;
  background: var(--gradient_logo_subtle);
  color: var(--color_fg_on_state_danger_subtle);
}

.chip-danger::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient_logo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}