/* Styles for the /guides content pages only. Layers on home.css rather than
 * replacing it, the same way extension.css does — the nav, footer, buttons,
 * hero and closer are all already correct there and must not fork.
 *
 * These pages are prose-led, which the lander is not, so what lives here is the
 * reading column, the spec table and the cross-links. Nothing else. */

/* --------------------------------------------------------------------------
   Breadcrumb. Real navigation, and it backs the BreadcrumbList JSON-LD — the
   markup and the visible trail have to agree or the structured data is a claim
   about a page that does not exist.
   -------------------------------------------------------------------------- */
.crumbs {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 26px) var(--pad) 0;
    font-size: 0.82rem;
    color: var(--fg-faint);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.crumbs a {
    color: var(--fg-dim);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    /* Padding is the hit area — WCAG 2.2 target size applies to a breadcrumb,
       which is a row of standalone links rather than prose. */
    padding: 4px 2px;
}

.crumbs a:hover { text-decoration-color: currentColor; color: var(--fg); }

.crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: var(--line-strong);
}

.crumbs [aria-current="page"] { color: var(--fg-dim); }

/* The guide hero sits under a breadcrumb, so it cannot carry the lander's top
   padding as well or the h1 lands halfway down the viewport. */
.guide-hero { padding-top: clamp(24px, 3vw, 40px); min-height: 0; }

/* --------------------------------------------------------------------------
   Reading column. Capped at a ~68 character measure: this is the one place on
   the site where someone reads several hundred words in a row, and the lander's
   full-width grid is wrong for that.
   -------------------------------------------------------------------------- */
.guide-body {
    max-width: 760px;
    margin-inline: auto;
}

.guide-body h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    letter-spacing: -0.02em;
    margin-top: clamp(40px, 5vw, 64px);
    margin-bottom: 16px;
}

.guide-body h3 {
    font-size: 1.1rem;
    margin-top: 32px;
    margin-bottom: 10px;
}

.guide-body p,
.guide-body li {
    color: var(--fg-dim);
    font-size: 1rem;
    line-height: 1.75;
}

.guide-body p { margin-bottom: 18px; }

.guide-body ul,
.guide-body ol {
    margin: 0 0 22px 22px;
    display: grid;
    gap: 10px;
}

.guide-body strong { color: var(--fg); font-weight: 600; }

.guide-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Spec table. The numbers are the reason these pages are worth reading, so they
   get a real table rather than being buried in a sentence.
   -------------------------------------------------------------------------- */
.spec-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

/* Carries tabindex="0" so the scroll is reachable by keyboard — same reasoning
   as the permission tables on /privacy. */
.spec-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.spec-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.spec-table th,
.spec-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.spec-table thead th {
    color: var(--fg);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
}

.spec-table tbody th {
    color: var(--fg);
    font-weight: 500;
    width: 42%;
}

.spec-table td { color: var(--fg-dim); }

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }

.spec-table code {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 0.88em;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Callout. Used for the one gotcha per page that actually costs people a
   re-render, so it should not read as decoration.
   -------------------------------------------------------------------------- */
.guide-note {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-card);
    background: rgb(var(--accent-rgb) / 0.05);
}

.guide-note p { margin: 0; }
.guide-note p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Cross-links between the guides. auto-fit so this fills the row on a wide
   screen and collapses to one column on a phone without a breakpoint.
   -------------------------------------------------------------------------- */
/* Centres a .section-head over the 760px reading column. Without this it aligns
   to the 1240px section instead and sits visibly left of the cards below it. */
.guide-head { max-width: 760px; margin-inline: auto; }

.guide-more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
    max-width: 760px;
    margin-inline: auto;
}

.guide-more a {
    display: block;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--ink-card);
    text-decoration: none;
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.guide-more a:hover {
    border-color: rgb(var(--accent-rgb) / 0.45);
    transform: translateY(-2px);
}

.guide-more strong {
    display: block;
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.guide-more span {
    color: var(--fg-dim);
    font-size: 0.88rem;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .guide-more a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Output gallery.

   Deliberately NOT added to REVEAL_TARGETS in home.js. Same reasoning as
   .guide-body: this is page content, so it has to render without JavaScript.
   Adding a selector to the hiding rule without adding it to REVEAL_TARGETS is
   what makes content invisible forever — see the note in CLAUDE.md.

   The captions carry the actual settings used, which is the difference between
   a gallery and decoration: someone can read one and reproduce the render.
   -------------------------------------------------------------------------- */
.guide-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.guide-gallery figure {
    margin: 0;
}

.guide-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: var(--ink-card);
}

.guide-gallery figcaption {
    margin-top: 10px;
    color: var(--fg-dim);
    font-size: 0.85rem;
    line-height: 1.6;
}

.guide-gallery figcaption code {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.94em;
    color: var(--fg-faint);
}