/* Page-specific fixes for the marketing and content pages (QA 2026-09-24).
   Linked only from the templates that use them, after app.css. */

/* Home: example bot tiles read left to right at every width. The runtime line
   used to be one nowrap string that ran under the "online" badge; now each part
   stays whole and "Example" drops to its own line when the name box is narrow. */
.showcase .tile { text-align: left; }
.tile-name { min-width: 0; }
.tile-head .sub > span, .tile-head .sub > b { white-space: nowrap; }

/* Pricing: the notes under the centred cards are centred too. */
.pricing-note { margin-top: 14px; text-align: center; }

/* Content pages: the breadcrumb is smaller type than the prose, so 72ch of it
   was a narrower box that sat indented from the text column. */
.breadcrumbs.prose-width { max-width: calc(72ch * 1.05 / 0.9); }

/* Blog: the empty state sits centred under the centred heading. */
.blog-empty { text-align: center; }
.nowrap { white-space: nowrap; }

/* Templates: the "Use this template" buttons line up along the bottom of a row. */
.template-card { display: flex; flex-direction: column; align-items: flex-start; }
.template-card > p.muted { flex: 1; }

/* Pricing on a phone: all three plans fit without a sideways scroll. */
@media (max-width: 600px) {
  .table-card .ptable { min-width: 0; }
  /* whole words: `overflow-wrap: anywhere` split "unlimite/d" (QA recheck N7).
     The values drop the wider mono face, and a long label hyphenates. */
  .ptable th, .ptable td { padding: 10px 6px; font-size: 0.8rem; }
  .ptable td { font-family: var(--sans); font-weight: 700; }
  .ptable td:first-child { hyphens: auto; -webkit-hyphens: auto; }
  .ptable th { font-size: 0.95rem; }
  .ptable th small { font-size: 0.72rem; }
}

/* Templates: [ Official | Community ] toggle, one panel per source. Without JS
   both panels show and the halves are plain in-page links. */
.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.tpl-grid .template-card { padding: 26px 28px; position: relative; gap: 10px; }
.tpl-grid .template-card h3 { font-size: 1.15rem; }
.tpl-grid .template-card h3 a { color: var(--text); }
.tpl-grid .template-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tpl-grid .template-card .actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
/* The only hover: an accent border that fades in (opacity only; the card never moves). */
.template-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 180ms ease;
  border: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); }
@media (hover: hover) and (pointer: fine) { .template-card:hover::after { opacity: 1; } }
.template-card:focus-within::after { opacity: 1; }
.lang-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.78rem; font-weight: 800; color: var(--text); }
.lang-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.lang-tag.node i { background: var(--mint); }
.lang-tag.python i { background: var(--sun); }
.lang-tag.go i { background: var(--primary); }
.seg-wrap { display: flex; justify-content: center; margin-bottom: 36px; }
.seg-toggle { margin-top: 0; padding: 6px; box-shadow: inset 0 0 0 1px var(--border); }
.seg-toggle a { height: 44px; padding: 0 24px; font-size: 1rem; gap: 8px; }
.seg-toggle a .badge { min-height: 22px; padding: 0 8px; }
.seg-toggle a.active { background: var(--primary); color: var(--primary-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); }
.seg-toggle a.active .badge { background: color-mix(in srgb, var(--primary-fg) 22%, transparent); color: inherit; }
.seg-toggle a:focus-visible { outline-offset: -3px; }
.tpl-panel + .tpl-panel { margin-top: 56px; }
[data-tabs-ready] .tpl-panel + .tpl-panel { margin-top: 0; }
.tpl-panel-h { text-align: center; font-size: 1.6rem; margin-bottom: 8px; }
[data-tabs-ready] .tpl-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tpl-intro { text-align: center; max-width: 60ch; margin: 0 auto 28px; }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: minmax(0, 1fr); } .seg-toggle a { padding: 0 18px; } .tpl-grid .template-card { padding: 22px 20px; } }
.tpl-grid > p.muted { grid-column: 1 / -1; text-align: center; }