/* =====================================================================
   Sticky section nav + authored-section bands. Shared by the public community
   page and the public land-node page, so the two read alike.
   Palette comes from mln-directory.css's --mln-* tokens.
   ===================================================================== */

.mln-secnav {
    position: sticky;
    /* The directory topbar is itself sticky at z-index 1200; sit just under it. */
    top: 0;
    z-index: 900;
    margin: 1.25rem 0 0;
    background: var(--mln-surface, #fff);
    border-top: 1px solid var(--mln-line, #e3ebe7);
    border-bottom: 1px solid var(--mln-line, #e3ebe7);
    /* Rounded by default — on the land-node page nothing sits under it, so the strip
       reads as its own card. The community page overrides the bottom pair below. */
    border-radius: var(--mln-r-md, 12px);
    /* Required by the radius, not decorative: the ::after scroll fade is a square box
       pinned to the right edge, and without clipping it paints over the rounded corner. */
    overflow: hidden;
}

/*
  Flush pairing. On the community page this strip sits directly on top of the full-width
  map, and the two should read as ONE unit rather than two stacked cards: the outer corners
  stay round, the seam between them is square, and the nav's own bottom border becomes the
  divider. Keyed off actual adjacency rather than a page class, so it applies exactly where
  the two elements really do touch and nowhere else — the land-node page has no map here and
  keeps the fully rounded form above.
*/
.mln-secnav:has(+ .mln-region-map) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mln-secnav + .mln-region-map {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*
 * Scroll affordance. A land node with every panel populated needs ~1410px of nav on a
 * 1052px column: measured 358px hidden and the last three entries invisible at 1440px,
 * with nothing on screen suggesting the strip scrolled. A truncated "Imp…" reads as a
 * layout bug, not as "there is more".
 *
 * Self-hiding by construction: the gradient fades to the surface colour, so when the
 * strip does NOT overflow it is surface-over-surface and invisible. No JS, no
 * scroll listener, and nothing to keep in sync.
 */
.mln-secnav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        var(--mln-surface, #fff) 70%);
}

.mln-secnav-inner {
    display: flex;
    gap: 0.25rem;
    /* A long section list must scroll rather than wrap into a tall block that eats
       the viewport on every scroll. */
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.35rem 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.mln-secnav-link {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border-radius: var(--mln-r-pill, 999px);
    font: 600 0.85rem/1 var(--mln-ui, system-ui, sans-serif);
    color: var(--mln-muted, #5c6b65);
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s, color .16s;
}
.mln-secnav-link:hover { background: var(--mln-surface-2, #eef3f0); color: var(--mln-ink, #132420); }
.mln-secnav-link.is-on { background: var(--mln-primary, #00594c); color: #fff; }
.mln-secnav-link:focus-visible {
    outline: 2px solid var(--mln-primary, #00594c);
    outline-offset: 2px;
}

/* ---- authored sections ---- */
.mln-community-section {
    padding: 2rem 0;
    border-bottom: 1px solid var(--mln-line, #e3ebe7);
}
/* Alternating tint so six consecutive bands stay readable as separate sections. */
.mln-community-section:nth-of-type(even) {
    background: var(--mln-surface-2, #eef3f0);
    /* Full-bleed tint inside a padded container without a wrapper element. */
    box-shadow: -100vw 0 0 var(--mln-surface-2, #eef3f0), 100vw 0 0 var(--mln-surface-2, #eef3f0);
}

.mln-community-section-title {
    font: 700 1.35rem/1.2 var(--mln-disp, system-ui, sans-serif);
    color: var(--mln-ink, #132420);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------
   Authored HTML body. This is the ONE place in V1.3 rendering unescaped
   markup (sanitized on write). The rules below are scoped to this class so an
   authored section can style ITSELF but cannot restyle the page chrome around
   it — belt and braces alongside the sanitizer's CSS property allowlist.
   ------------------------------------------------------------------- */
.mln-community-section-body {
    font: 400 1rem/1.7 var(--mln-ui, system-ui, sans-serif);
    color: var(--mln-ink, #132420);
    /* Contain floats and stray wide children rather than letting them escape. */
    overflow-x: auto;
    max-width: 100%;
}
.mln-community-section-body > :first-child { margin-top: 0; }
.mln-community-section-body > :last-child { margin-bottom: 0; }

.mln-community-section-body h2,
.mln-community-section-body h3,
.mln-community-section-body h4 {
    font-family: var(--mln-disp, system-ui, sans-serif);
    color: var(--mln-ink, #132420);
    line-height: 1.25;
    margin: 1.4rem 0 0.6rem;
}
.mln-community-section-body h2 { font-size: 1.2rem; }
.mln-community-section-body h3 { font-size: 1.05rem; }
.mln-community-section-body h4 { font-size: 0.95rem; }

.mln-community-section-body p { margin: 0 0 0.9rem; }
.mln-community-section-body ul,
.mln-community-section-body ol { margin: 0 0 0.9rem 1.25rem; }
.mln-community-section-body li { margin-bottom: 0.3rem; }

.mln-community-section-body a {
    color: var(--mln-primary, #00594c);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mln-community-section-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mln-r-sm, 10px);
}

.mln-community-section-body blockquote {
    margin: 1rem 0;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--mln-accent, #bc4e2c);
    color: var(--mln-muted, #5c6b65);
}

.mln-community-section-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
}
.mln-community-section-body th,
.mln-community-section-body td {
    border: 1px solid var(--mln-line-2, #d6e0db);
    padding: 0.45rem 0.6rem;
    text-align: left;
}
.mln-community-section-body th { background: var(--mln-surface-2, #eef3f0); font-weight: 700; }

.mln-community-section-body pre,
.mln-community-section-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
}
.mln-community-section-body pre {
    background: var(--mln-surface-2, #eef3f0);
    padding: 0.75rem;
    border-radius: var(--mln-r-sm, 10px);
    overflow-x: auto;
}

@media (max-width: 640px) {
    .mln-community-section { padding: 1.4rem 0; }
    .mln-community-section-title { font-size: 1.15rem; }
}