/* The guides (templates/guides/, cloud/server/guides.py): a readable article column, tables, code, figures, the idea
   cards and the random idea box. The redesign (theme.css): near-black, crisp white headings, soft grey body text at a
   comfortable 17px, hairline cards that lift with a blue glow, the glossy blue pill for the one action. */

.guide-wrap { padding-top: 22px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
.guide-wrap > * { min-width: 0; }   /* a wide table or code block scrolls inside itself, never widens the page */
.guide { max-width: 760px; width: 100%; margin: 0 auto; font-size: 1.07rem; line-height: 1.72; color: #d4d7de; }
.guide p, .guide li { color: #d4d7de; }
.guide b, .guide strong { color: #fff; font-weight: 650; }
.guide-head { position: relative; margin: 8px 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.guide-head .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.guide-head h1 { margin: 0 0 0.35em; font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.guide-lead { font-size: var(--fs-lead); color: var(--ink-2) !important; font-weight: 400; line-height: 1.6; margin: 0 0 14px; }
@media (max-width: 560px) { .guide { font-size: 1.02rem; } }
.guide-meta { margin: 0; color: var(--ink-3); }
.guide h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 800; letter-spacing: -0.03em; margin: 1.9em 0 0.55em; scroll-margin-top: 84px; }
.guide h3 { font-size: 1.22rem; font-weight: 700; margin: 1.5em 0 0.4em; }
.guide ul, .guide ol { padding-left: 24px; margin: 0 0 1.1em; }
.guide li + li { margin-top: 7px; }
.guide li::marker { color: var(--ink-3); }
.guide a:not(.btn) { color: var(--blue); font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide a:not(.btn):hover { color: #7fb0ff; }
.guide code { font-size: 0.9em; color: #e9ebf0; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.guide pre { background: #0d0e11; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; color: #e6e8ee;
  overflow-x: auto; font-size: 0.9rem; line-height: 1.55; margin: 0 0 1.3em; tab-size: 4; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9); }
.guide pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.guide kbd { font-family: var(--font-body); font-weight: 600; font-size: 0.88em; padding: 1px 7px; border-radius: 7px; color: #fff;
  border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface-2); }

/* breadcrumb */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.88rem; font-weight: 500; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, 0.22); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--ink-3); }

/* on this page */
.toc { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 50%), var(--surface);
  padding: 16px 20px; margin: 0 0 1.4em; }
.toc b { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin: 10px 0 0; columns: 2 220px; column-gap: 28px; }
.toc li { break-inside: avoid; }
.toc a:not(.btn) { color: var(--ink); text-decoration: none; }
.toc a:not(.btn):hover { color: var(--blue); }

/* tables scroll inside themselves on a phone */
.table-wrap { overflow-x: auto; margin: 0 0 1.3em; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.guide table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; line-height: 1.5; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.guide thead th { background: rgba(255, 255, 255, 0.025); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.guide tbody tr:last-child td { border-bottom: 0; }
.guide tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* pictures */
.guide figure { margin: 0 0 1.5em; }
.guide figure img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.guide figcaption { font-size: 0.88rem; color: var(--ink-3); margin-top: 8px; }
.fig-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 1.5em; }
.fig-row figure { margin: 0; }

/* a numbered how-to list */
.how-steps { list-style: none; padding: 0 !important; counter-reset: how; display: grid; gap: 10px; }
.how-steps > li { counter-increment: how; position: relative; padding: 14px 16px 14px 60px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); margin: 0 !important; }
.how-steps > li::before { content: counter(how); position: absolute; left: 14px; top: 13px; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 700; font-size: 0.88rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px -4px rgba(29, 107, 255, 0.9); }

/* call-outs inside an article */
.guide .note { margin: 0 0 1.3em; font-size: 1rem; }
.guide-try { position: relative; display: grid; gap: 12px; justify-items: start; border: 1px solid rgba(74, 144, 255, 0.3); border-radius: var(--r-lg);
  background: radial-gradient(80% 140% at 0% 0%, rgba(47, 123, 255, 0.14), transparent 60%), var(--surface); padding: 20px; margin: 1.3em 0 1.5em;
  box-shadow: 0 24px 60px -34px rgba(47, 123, 255, 0.7); }
.guide-try p { margin: 0; }
.guide-try .prompt { font-weight: 500; color: #fff; font-size: 1.05rem; border-left: 2px solid var(--blue); padding-left: 12px; }

/* the questions */
.guide-faq { margin-top: 2.2em; }
.guide-faq .faq { max-width: none; display: grid; }
.guide-faq .faq details p { font-size: 1rem; }

.guide-cta { max-width: 1040px; width: 100%; margin: 0 auto; text-align: center; padding: clamp(36px, 6vw, 64px) clamp(18px, 4vw, 48px); }
.guide-cta h2 { font-family: var(--font-hero); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: 0 auto 14px; max-width: 18ch; }
.guide-cta p { max-width: 56ch; margin: 0 auto 24px; font-size: var(--fs-lead); }

/* the other guides */
.guide-related { max-width: 1040px; width: 100%; margin: 0 auto; }
.guide-related h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.guide-cards { list-style: none; margin: 0 0 1.2em; padding: 0 !important; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guide .guide-cards li, .guide-cards li { margin: 0; }
.guide-cards a, .idea-genres a { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px 44px 18px 18px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--surface);
  color: var(--ink) !important; text-decoration: none; box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.guide-cards a::after, .idea-genres a::after { content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px;
  border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.25s var(--ease), border-color 0.25s; }
.guide-cards a:hover, .idea-genres a:hover { transform: translateY(-3px); border-color: rgba(74, 144, 255, 0.45);
  box-shadow: var(--shadow-2), 0 18px 46px -22px rgba(47, 123, 255, 0.6); }
.guide-cards a:hover::after, .idea-genres a:hover::after { border-color: var(--blue); transform: translateX(3px) rotate(45deg); }
.guide-cards b, .idea-genres b { font-weight: 700; letter-spacing: -0.015em; font-size: 1.04rem; line-height: 1.3; color: #fff; }
.guide-cards span, .idea-genres span { color: var(--ink-2) !important; font-size: 0.92rem; font-weight: 400; line-height: 1.5; }

/* the idea pages */
.idea-genres { list-style: none; margin: 0 0 1.5em; padding: 0 !important; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.idea-genres li { margin: 0 !important; }
.idea-list { list-style: none; margin: 0 0 1.5em; padding: 0 !important; display: grid; gap: 10px; }
.idea-list li { margin: 0 !important; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color 0.25s; }
.idea-list li:hover { border-color: var(--line-2); }
.idea-list b { font-weight: 700; display: block; color: #fff; }
.idea-list p { margin: 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }
.idea-list .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .idea-list li { grid-template-columns: 1fr; }
  .idea-list .btn { justify-self: start; }
}

/* the random idea box (static/js/guides.js) */
.random-idea { display: grid; gap: 14px; border: 1px solid rgba(74, 144, 255, 0.35); border-radius: var(--r-lg);
  background: radial-gradient(90% 140% at 100% 0%, rgba(47, 123, 255, 0.18), transparent 60%), var(--surface);
  padding: 22px; margin: 0 0 1.7em; box-shadow: 0 24px 60px -34px rgba(47, 123, 255, 0.8); }
.random-idea h2 { margin: 0; font-size: 1.35rem; }
.random-idea .ri-out { display: grid; gap: 6px; min-height: 3.2em; }
.random-idea .ri-out b { font-size: 1.15rem; color: #fff; }
.random-idea .ri-out p { margin: 0; color: var(--ink); }
.random-idea .ri-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.random-idea [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .guide-cards a, .idea-genres a, .guide-cards a::after, .idea-genres a::after { transition: none; }
  .guide-cards a:hover, .idea-genres a:hover { transform: none; }
}