/* Step-by-step member guides (district-how-to.php). Written for a phone first:
   one column, big step numbers, reading text never below .95rem, and every
   "screen" a drawn box that wraps rather than a picture that has to be pinched.
   The only smaller type is the small-caps labels INSIDE a drawn screen, copied
   from the real form's size. Colours come only from the site tokens, so a
   club's theme re-colours it; brass is kept for winners, as styles.css asks. */

.howto {
    max-width: 36rem;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.55;
}

.howto-lead {
    font-size: 1.15rem;
    color: var(--muted);
    margin-top: -.25rem;
}

.howto-steps {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2.5rem;
    counter-reset: howto-step;
}

.howto-steps > li {
    counter-increment: howto-step;
    position: relative;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1rem 1rem 3.9rem;
    margin-bottom: 1rem;
}

.howto-steps > li::before {
    content: counter(howto-step);
    position: absolute;
    left: .9rem;
    top: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--cream);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 2.25rem;
    text-align: center;
}

.howto-steps h2 {
    font-size: 1.25rem;
    margin: .2rem 0 .45rem;
    color: var(--ink);
}

.howto-steps p {
    margin: 0 0 .6rem;
}

.howto-points {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
}

.howto-points li {
    margin-bottom: .35rem;
}

.howto-tip {
    font-size: .95rem;
    color: var(--muted);
    border-left: 3px solid var(--border);
    padding-left: .65rem;
}

/* A drawn phone screen: what the member will see, without anybody's name. */
.howto-screen {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .85rem .9rem;
    margin: .75rem 0;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.howto-screen p {
    margin: 0;
}

.howto-screen--chat {
    background: var(--bottle-100);
}

.howto-screen--done {
    border-color: var(--fairway);
    border-left-width: 4px;
}

.howto-screen-button {
    color: var(--fairway);
    font-weight: 700;
    border-top: 1px solid var(--border);
    padding-top: .45rem;
    width: 100%;
    text-align: center;
}

.howto-screen-meta,
.howto-screen-label {
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.howto-screen-label {
    color: var(--primary);
    font-weight: 600;
}

.howto-screen-summary {
    font-weight: 600;
    color: var(--ink);
}

.howto-screen-field {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem .7rem;
    background: var(--cream);
}

.howto-faq dt {
    font-weight: 700;
    color: var(--ink);
    margin-top: 1rem;
}

.howto-faq dd {
    margin: .25rem 0 0;
}

@media (max-width: 480px) {
    .howto-steps > li {
        padding-left: 3.4rem;
    }

    .howto-steps > li::before {
        left: .7rem;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.05rem;
    }
}

/* "Do this first" sits above the steps and must read as a prerequisite, not
   as step zero: a fairway rule, no number. */
.howto-first {
    background: var(--cream);
    border: 1px solid var(--border);
    border-left: 5px solid var(--fairway);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1.25rem 0 1.5rem;
}

.howto-first h2 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
    color: var(--ink);
}

.howto-first p {
    margin: 0 0 .6rem;
}

/* A thumb-sized button, full width on a phone. */
.howto-cta {
    display: block;
    text-align: center;
    padding: .8rem 1rem;
    font-size: 1.05rem;
}

.howto-nowrap {
    white-space: nowrap;
}

/* What the member sends, right-aligned like their own chat bubble. */
.howto-screen-mine {
    align-self: flex-end;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .2rem .6rem;
    font-weight: 600;
}

/* The troubleshooting heading is a real heading, not the site's small-caps
   .section-head label, which is far below this page's reading floor. */
.howto-h2 {
    font-size: 1.3rem;
    color: var(--ink);
    margin: 2rem 0 .25rem;
}