/* ============================================================
   LawnBeast V2 — ARTICLE SKIN: guide  (/guides/<slug>)
   Layout 1b in the "SaaS feature content layouts" design doc.

   Task-sized how-to: prerequisites, numbered steps, a settings
   reference table, troubleshooting, related guides.

   Concept pages (e.g. jobs-vs-invoices) use this same skin and
   simply omit .art-steps / the settings table — a concept is a
   guide without clicks, not a fourth layout. See
   templates/guides/_STARTER.html.

   Loads after css/v2/article/base.css. MOBILE-FIRST.
   ============================================================ */

/* ---------- Head ---------- */
.art--guide .art-title {
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.art--guide .art-lede {
    margin-bottom: 24px;
}

/* ---------- Rail meta (updated / read time / level) ---------- */
.art-railmeta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* On mobile the rail is a pill strip with no room for this; the same
   facts ride in the head's .art-meta row instead. */
.art--guide .art-railmeta { display: none; }

/* ---------- Width ---------- */
/* The guide skin releases the reading measure entirely: every block — prose
   included — runs the full width of the body column. Redefining the token here
   rather than editing each rule means one declaration covers the lede, <p>,
   lists, callouts, the thesis, the FAQ, quotes and the Q/A stack, and any block
   added later inherits the same answer. The head is inside .art-body in
   tools/guide_article.html, so the title/lede follow.

   Trade-off, stated plainly: at the 1320 xxl tier the column is 992px, which is
   ~130 characters per line at 15px — past the 45–90 the measure existed to
   hold. That is the requested behaviour, not an oversight. Reverting is one
   line: delete this rule.

   The base --art-wide (also 100%) still matters for the other two skins, whose
   bodies keep a cap. */
.art--guide .art-body { --art-measure: 100%; }

/* ---------- Steps ---------- */
.art-steps {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    counter-reset: art-step;
}
.art-steps > li {
    position: relative;
    counter-increment: art-step;
    padding-left: 42px;
    margin: 0 0 26px;
    min-width: 0;
}
.art-steps > li:last-child { margin-bottom: 0; }
.art-steps > li::before {
    content: counter(art-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--art-font-mono);
    font-weight: 700;
    font-size: 14px;
}
/* connector rail down the left, stopping at the last step */
.art-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 34px;
    bottom: -26px;
    width: 2px;
    background: var(--border-light);
}
.art-steps > li > h3 {
    margin: 3px 0 8px;
    font-size: 16px;
    letter-spacing: -.01em;
}
.art-steps > li > p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
}
.art-steps > li > *:last-child { margin-bottom: 0; }
/* nested blocks inside a step keep the step's rhythm */
.art-steps .art-callout,
.art-steps .art-figure,
.art-steps .art-table-wrap { margin-bottom: 0; }

/* Steps carry deep-linked ids (#step-1..5 on the TestFlight guide, linked
   from its overview cards and from outside). base.css offsets only
   .art-body section, so without this a jump parks the step under the nav. */
.art-steps > li[id] { scroll-margin-top: calc(var(--nav-h) + 56px); }

.art-substeps {
    margin: 0 0 12px;
    padding-left: 20px;
}
.art-substeps li { font-size: 13.5px; margin-bottom: 5px; }

.art-default {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* ---------- Section rules ---------- */
/* Reference + troubleshooting sit below the steps behind a hairline. */
.art--guide .art-body > section.art-section--ruled {
    border-top: 1px solid var(--border-light);
    padding-top: 24px;
    margin-top: 30px;
}
.art--guide .art-body > section.art-section--ruled > h2 { margin-top: 0; }

/* ---------- Foot ---------- */
.art-nextup {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}
.art-nextup-head {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 768px) {
    .art--guide .art-title { font-size: 30px; }
    .art-steps > li > h3 { font-size: 17px; }
}

@media (min-width: 1000px) {
    /* Rail on the left, as a tinted column flush to the body —
       the design doc's 214px "On This Page" aside. */
    /* display:grid + align-items:start and the sticky rail offset are shared
       with the feature skin and live in base.css under this same query. */
    .art--guide .art-layout {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 40px;
        padding-top: 12px;
    }
    .art--guide .art-railmeta { display: block; }
    /* No cap: the body fills its grid cell, which .pub-container already bounds
       (992px at the 1320 xxl tier). The old 720px left ~270px of the column
       empty on a wide monitor while the comparison tables scrolled inside it.
       Prose follows it out too — the --art-measure override above resolves
       every text block's max-width to 100%, so this cap was the only thing
       still holding them. Both halves of that decision live in the Width block
       near the top of this file; read its trade-off note before changing
       either. */
    .art--guide .art-body { max-width: none; }
    .art--guide .art-head { padding-top: 36px; }
}