/* v3.70 Guides engine — the long-form guide page, the library/topic hubs and
   the live embeds inside guides. Standalone (loaded via $styles), so it is
   stamped by Asset::url on its own: no main.css bundle rebuild needed.
   Colours come from tokens.css only, so light and dark themes both work. */

/* ---- Library + hubs ---------------------------------------------------- */
.guides-hero { min-height:0; }
.guides-hero .display-title { max-width:16ch; }
.guides-topics { display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-top:var(--space-lg); }
.guides-topics a { display:inline-flex; align-items:center; gap:.4em; min-height:2.5rem; padding:.45rem 1rem; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); color:var(--color-text); font-size:var(--fs-sm); font-weight:600; text-decoration:none; transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out); }
.guides-topics a small { color:var(--color-text-faint); font-weight:500; }
.guides-topics a:hover { border-color:var(--color-text); }
.guides-topics a[aria-current="page"] { background:var(--color-text); border-color:var(--color-text); color:var(--color-bg); }
.guides-topics a[aria-current="page"] small { color:inherit; opacity:.7; }
.guide-library-grid { margin-top:var(--space-xl); }
.guide-library-grid .guide-card { gap:var(--space-sm); }
.guide-library-grid .guide-card h2 { margin:auto 0 0; font-size:clamp(1.9rem,3vw,3rem); }
.guide-library-grid .guide-card h2 a { color:inherit; text-decoration:none; }
.guide-library-grid .guide-card h2 a::after { content:""; position:absolute; inset:0; } /* whole card clickable */
.guide-card-excerpt { max-width:46ch; margin:0; font-size:var(--fs-sm); line-height:1.5; }

/* ---- Guide page ---------------------------------------------------------- */
.guide-page { padding:calc(var(--nav-height) + var(--space-xl)) 0 var(--space-2xl); }
.guide-preview-flag { margin:0 0 var(--space-sm); padding:.7rem 1rem; border:1px dashed var(--color-warning); border-radius:var(--radius-md); color:var(--color-text); font-size:var(--fs-sm); }
.guide-head { display:grid; gap:var(--space-md); align-items:end; padding:clamp(1.5rem,5vw,4rem); border-radius:var(--radius-xl); background:linear-gradient(140deg,color-mix(in srgb,var(--color-pop-orange) 16%,var(--color-surface-1)),color-mix(in srgb,var(--color-pop-pink) 10%,var(--color-surface-1)) 70%); }
.guide-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; color:var(--color-text-dim); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.guide-crumbs a { color:var(--color-accent-text, var(--color-accent)); text-decoration:none; }
.guide-crumbs a:hover { text-decoration:underline; }
.guide-title { max-width:20ch; margin:var(--space-sm) 0 var(--space-xs); font-family:var(--font-serif); font-size:clamp(2.3rem,5.2vw,4.4rem); line-height:1; letter-spacing:-.03em; text-wrap:balance; }
.guide-dek { max-width:52ch; margin:0; color:var(--color-text-dim); font-size:var(--fs-lg); line-height:1.45; }
.guide-byline { display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--space-md) 0 0; color:var(--color-text-dim); font-size:var(--fs-sm); }
.guide-byline span:first-child { color:var(--color-text); font-weight:600; }
/* v3.84: full-width header with a stats column (reads, minutes, questions). */
.guide-head-stats { display:none; margin:0; }
.guide-head-stats div { display:grid; gap:.15rem; }
.guide-head-stats dt { color:var(--color-text-dim); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.guide-head-stats dt a { color:inherit; text-decoration:none; }
.guide-head-stats dt a:hover { color:var(--color-text); text-decoration:underline; }
.guide-head-stats dd { margin:0; font-family:var(--font-serif); font-size:clamp(2rem,3vw,2.8rem); line-height:1; color:var(--color-text); }
.guide-stat-new { font-size:.7em; color:var(--color-pop-orange); }
@media (min-width:1000px) {
  .guide-head { grid-template-columns:minmax(0,1fr) auto; }
  .guide-head-stats { display:grid; gap:var(--space-md); min-width:11rem; padding-left:clamp(1.5rem,3vw,3rem); border-left:1px solid color-mix(in srgb,var(--color-text) 14%,transparent); }
  .guide-byline-views { display:none; }
}
.guide-cover { max-width:68rem; margin:var(--space-lg) 0 0; }
.guide-cover img { display:block; width:100%; height:auto; aspect-ratio:40/21; object-fit:cover; border-radius:var(--radius-xl); }

.guide-layout { display:grid; grid-template-columns:minmax(0,44rem); gap:var(--space-xl); margin-top:var(--space-xl); }
@media (min-width:1100px) {
  .guide-layout { grid-template-columns:15rem minmax(0,44rem); }
  .guide-layout-solo { grid-template-columns:minmax(0,44rem); } /* no contents box: no empty rail */
  .guide-toc { position:sticky; top:calc(var(--nav-height) + var(--space-md)); align-self:start; max-height:calc(100vh - var(--nav-height) - 2rem); overflow:auto; }
}
.guide-toc-box { padding:var(--space-sm) 0; border-top:2px solid var(--color-text); }
.guide-toc-box summary { cursor:pointer; list-style:none; color:var(--color-text); font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.guide-toc-box summary::-webkit-details-marker { display:none; }
.guide-toc-box summary::after { content:" +"; color:var(--color-text-faint); }
.guide-toc-box[open] summary::after { content:" –"; }
.guide-toc ol { margin:var(--space-xs) 0 0; padding:0; list-style:none; counter-reset:toc; }
.guide-toc li { margin:0; }
.guide-toc a { display:block; padding:.35rem 0 .35rem .75rem; border-left:2px solid var(--color-border); color:var(--color-text-dim); font-size:var(--fs-sm); line-height:1.35; text-decoration:none; }
.guide-toc .guide-toc-h3 a { padding-left:1.5rem; font-size:var(--fs-xs); }
.guide-toc a:hover { color:var(--color-text); }
.guide-toc a.is-active { border-left-color:var(--color-accent); color:var(--color-text); font-weight:600; }

.guide-body { min-width:0; color:var(--color-text); font-size:1.075rem; line-height:1.75; }
.guide-body > * + * { margin-top:1.15em; }
.guide-body p { margin:0; color:var(--color-text-dim); }
.guide-body p strong, .guide-body li strong { color:var(--color-text); }
.guide-body .guide-lead { color:var(--color-text); font-family:var(--font-serif); font-size:clamp(1.2rem,1.8vw,1.45rem); line-height:1.55; }
.guide-body h2 { margin:2.2em 0 0; font-family:var(--font-serif); font-size:clamp(1.65rem,2.6vw,2.15rem); line-height:1.12; letter-spacing:-.02em; scroll-margin-top:calc(var(--nav-height) + 1rem); }
.guide-body h3 { margin:1.8em 0 0; font-size:1.2rem; line-height:1.3; scroll-margin-top:calc(var(--nav-height) + 1rem); }
.guide-body h2 + *, .guide-body h3 + * { margin-top:.6em; }
.guide-body a { color:var(--color-text); text-decoration:underline; text-decoration-color:var(--color-accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.guide-body a:hover { text-decoration-color:var(--color-text); }
.guide-body ul, .guide-body ol { margin-bottom:0; padding-left:1.35rem; color:var(--color-text-dim); }
.guide-body li + li { margin-top:.45em; }
.guide-body ul li::marker { color:var(--color-accent); }
.guide-body ol li::marker { color:var(--color-accent); font-weight:700; }
.guide-callout { padding:var(--space-sm) var(--space-md); border-left:3px solid var(--color-accent); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--color-surface-1); }
.guide-callout p { color:var(--color-text); }
.guide-callout p + p { margin-top:.6em; }
.guide-table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.guide-table-wrap:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.guide-body table { width:100%; min-width:34rem; border-collapse:collapse; font-size:var(--fs-sm); line-height:1.5; }
.guide-body th, .guide-body td { padding:.65rem .85rem; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; }
.guide-body thead th { background:var(--color-surface-2); color:var(--color-text); font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; }
.guide-body tbody th { color:var(--color-text); font-weight:700; }
.guide-body td { color:var(--color-text-dim); }
.guide-body tbody tr:last-child > * { border-bottom:0; }
.guide-disclaimer { margin-top:var(--space-xl) !important; padding-top:var(--space-sm); border-top:1px solid var(--color-border); font-size:var(--fs-sm); }

/* ---- Embeds -------------------------------------------------------------- */
.guide-embed { margin-top:var(--space-lg) !important; margin-bottom:var(--space-sm); }
.guide-embed-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-xs); margin-bottom:var(--space-sm); }
.guide-body .guide-embed-title { margin:0; font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.guide-body .guide-embed-more { font-size:var(--fs-sm); font-weight:700; text-decoration:none; }
.guide-embed-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
@media (min-width:700px) { .guide-embed-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.guide-embed-grid .card-title { font-size:1rem; }
.guide-embed-grid .card-tagline { display:none; }
.guide-body .guide-embed-grid a { text-decoration:none; }
.guide-embed-cta { padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--color-border-strong); border-radius:var(--radius-xl); background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 14%,var(--color-surface-1)),var(--color-surface-1) 65%); }
.guide-body .guide-embed-cta-heading { margin:.3rem 0 .35rem; color:var(--color-text); font-family:var(--font-serif); font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.1; }
.guide-body .guide-embed-cta-text { max-width:44ch; font-size:var(--fs-base); }
.guide-embed-actions { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-sm); }
.guide-body .guide-embed-actions a { text-decoration:none; }
.guide-body .guide-embed-actions .btn-primary { color:#fff; }
.guide-embed-cities ul { display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin:var(--space-xs) 0 0; padding:0; list-style:none; }
.guide-embed-cities li { margin:0 !important; }
.guide-body .guide-embed-cities a { display:inline-flex; gap:.4em; padding:.4rem .85rem; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); font-size:var(--fs-sm); text-decoration:none; }
.guide-embed-cities small { color:var(--color-text-faint); }

/* ---- Phase C: city/category page copy (listing-landing.php) -------------- */
.landing-copy { padding-top:0; }
.landing-copy-body { max-width:46rem; padding-top:var(--space-xl); border-top:1px solid var(--color-border); }
.landing-copy-body > h2:first-child { margin-top:0; }

/* ---- Keep reading -------------------------------------------------------- */
.guide-related { padding-top:0; }
.guide-related-grid { display:grid; gap:var(--space-sm); margin-top:var(--space-md); }
@media (min-width:800px) { .guide-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.guide-related-card { display:flex; flex-direction:column; gap:var(--space-sm); min-height:12rem; padding:var(--space-md); border-radius:var(--radius-xl); color:#090909; text-decoration:none; transition:transform var(--duration-base) var(--ease-out); }
.guide-related-card:hover { transform:translateY(-4px); }
.guide-related-topic, .guide-related-action { font-size:var(--fs-xs); font-weight:800; }
.guide-related-name { margin:auto 0; font-family:var(--font-serif); font-size:clamp(1.4rem,2vw,1.8rem); font-weight:700; line-height:1.05; letter-spacing:-.02em; }

@media (max-width:599px) {
  .guide-head { padding:var(--space-md); }
  .guide-body { font-size:1rem; }
  .guide-toc-box:not([open]) { padding-bottom:var(--space-xs); }
}
@media (prefers-reduced-motion:reduce) { .guide-related-card, .guides-topics a { transition:none; } }

/* v3.81: "Talk to people in {city}" — the city's chat room, under city guides. */
.guide-room { display: flex; align-items: center; gap: .9rem; margin: var(--space-md) 0 0; padding: .9rem 1.1rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface-1)); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); color: var(--color-text); text-decoration: none; transition: border-color .2s, transform .2s; }
.guide-room:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.guide-room > span:nth-child(2) { display: grid; gap: .1rem; flex: 1; }
.guide-room small { color: var(--color-text-dim); font-size: var(--fs-sm); }
.guide-room-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.guide-room-icon svg { display: block; }