/* guide/help_article.css
   One reading style for help articles — used by the public Help Center,
   the admin editor and the admin preview, so what you edit is what students see. */

.article-body {
    --a-ink: #14213D;
    --a-text: #364152;
    --a-muted: #66728a;
    --a-line: #e3e8f0;
    --a-primary: #1F5EDB;
    --a-primary-soft: #eaf1ff;
    --a-signal: #F2B705;
    --a-signal-soft: #fff7db;
    font-size: 16px;
    line-height: 1.75;
    color: var(--a-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.article-body > :first-child { margin-top: 0 !important; }
.article-body > :last-child { margin-bottom: 0 !important; }

.article-body h1,
.article-body h2 {
    font-size: 1.32em;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: -0.012em;
    color: var(--a-ink);
    margin: 2.1em 0 0.65em;
    scroll-margin-top: 96px;
}
.article-body h3 {
    font-size: 1.08em;
    line-height: 1.4;
    font-weight: 700;
    color: var(--a-ink);
    margin: 1.6em 0 0.4em;
    scroll-margin-top: 96px;
}
.article-body h4 { font-size: 1em; font-weight: 700; color: var(--a-ink); margin: 1.3em 0 .3em; }
.article-body p { margin: 0 0 1em; }
.article-body strong, .article-body b { color: var(--a-ink); font-weight: 700; }
.article-body a {
    color: var(--a-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(31, 94, 219, .35);
    word-break: break-word;
}
.article-body a:hover { text-decoration-color: var(--a-primary); }

/* Bullet lists */
.article-body ul { margin: 0 0 1.2em; padding-left: 1.35em; }
.article-body ul > li { margin: 0 0 .45em; padding-left: .2em; }
.article-body ul > li::marker { color: var(--a-primary); }
.article-body li > ul, .article-body li > ol { margin-top: .45em; margin-bottom: .3em; }

/* Numbered steps — a route of numbered stops */
.article-body ol {
    list-style: none;
    counter-reset: step;
    margin: .5em 0 1.5em;
    padding: 0;
}
.article-body ol > li {
    counter-increment: step;
    position: relative;
    padding: .15em 0 1.15em 3em;
    min-height: 2.3em;
}
.article-body ol > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: .05em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--a-primary);
    color: var(--a-primary);
    font-weight: 800;
    font-size: .88em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.article-body ol > li::after {
    content: "";
    position: absolute;
    left: calc(.88em - 1px);
    top: 2em;
    bottom: .2em;
    border-left: 2px dashed #c3d3f3;
}
.article-body ol > li:last-child { padding-bottom: .3em; }
.article-body ol > li:last-child::after { display: none; }
.article-body ol > li:hover::before { background: var(--a-primary); color: #fff; }

/* Callout */
.article-body blockquote {
    margin: 1.3em 0;
    padding: .9em 1.1em;
    background: var(--a-signal-soft);
    border-left: 4px solid var(--a-signal);
    border-radius: 0 12px 12px 0;
    color: #4a3d0b;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* Tables */
.article-body .table-wrap,
.article-body .article-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 1.2em 0 1.5em;
    border: 1px solid var(--a-line);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.5; }
.article-body > table { margin: 1.2em 0; border: 1px solid var(--a-line); }
.article-body th {
    background: #f3f6fb;
    color: var(--a-ink);
    font-weight: 700;
    text-align: left;
    padding: .7em .95em;
    border-bottom: 1px solid var(--a-line);
    white-space: nowrap;
}
.article-body td { padding: .7em .95em; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body tbody tr:nth-child(even) td { background: #fafbfd; }

/* Inline bits */
.article-body code, .article-body kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86em;
    background: #f1f4f9;
    border: 1px solid var(--a-line);
    border-radius: 6px;
    padding: .1em .4em;
    color: var(--a-ink);
}
.article-body pre { background: #f6f8fb; border: 1px solid var(--a-line); border-radius: 12px; padding: 1em; overflow-x: auto; }
.article-body pre code { background: none; border: 0; padding: 0; }
.article-body mark { background: var(--a-signal-soft); color: inherit; padding: 0 .15em; border-radius: 3px; }
.article-body hr { border: 0; border-top: 1px solid var(--a-line); margin: 2em 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--a-line); }

@media (max-width: 640px) {
    .article-body { font-size: 15.5px; }
    .article-body ol > li { padding-left: 2.7em; }
}