/* ============================================================
   Webprogramming shared documentation styles
   ----
   Auto-applies to #content_intro and #content_description on
   every Websim_*.html page. Per-page CSS files do NOT need to
   redefine these styles. Page-specific rules (e.g. a sim's
   #ranplan-lab) continue to live in the per-page stylesheet.
   ============================================================ */

#content_intro,
#content_description {
    max-width: 820px;
    line-height: 1.55;
    color: #1b2331;
}

#content_intro h3,
#content_description h3 {
    margin-top: 22px;
    margin-bottom: 6px;
    color: #1e3a8a;
    border-bottom: 1px solid #cdd9e7;
    padding-bottom: 4px;
}

#content_intro h4,
#content_description h4 {
    margin-top: 16px;
    margin-bottom: 4px;
    color: #1d4ed8;
}

#content_intro h5,
#content_description h5 {
    margin-top: 12px;
    margin-bottom: 3px;
    color: #2745a1;
}

#content_intro p,
#content_description p {
    margin: 6px 0;
}

#content_intro ul,
#content_intro ol,
#content_description ul,
#content_description ol {
    margin: 6px 0;
    padding-left: 24px;
}

#content_intro li,
#content_description li {
    margin: 3px 0;
}

#content_intro code,
#content_description code {
    background: #eaf0f7;
    color: #143a8a;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.93em;
    white-space: nowrap;
}

#content_intro pre,
#content_description pre {
    background: #f3f6fb;
    border: 1px solid #cdd9e7;
    border-left: 4px solid #3b82f6;
    padding: 8px 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.93em;
    color: #0b1f4a;
}

#content_intro pre code,
#content_description pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    white-space: pre;
}

#content_intro blockquote,
#content_description blockquote {
    margin: 8px 0;
    padding: 6px 14px;
    border-left: 4px solid #94a3b8;
    background: #f7f9fc;
    color: #334155;
}

#content_intro hr,
#content_description hr {
    border: none;
    border-top: 1px solid #cdd9e7;
    margin: 16px 0;
}

/* ----------------------------------------------------------
   Opt-in utility classes — add them in per-page HTML as
   you tidy up each tutorial. They use the same vocabulary
   as the RanPlan reference page so the look stays consistent.
   ---------------------------------------------------------- */

/* Light-blue framed box for small reference lists. */
#content_intro .rp-doc-box,
#content_description .rp-doc-box {
    max-width: 800px;
    border: 1px solid #b8c7d9;
    border-left: 4px solid #3b82f6;
    background: #f7fbff;
    padding: 8px 12px;
    margin: 8px 0;
}

#content_intro .rp-doc-box p,
#content_description .rp-doc-box p {
    margin: 4px 0;
}

/* Equation block (single line / formula). */
#content_intro .rp-doc-eq,
#content_description .rp-doc-eq {
    max-width: 800px;
    background: #f7fbff;
    border: 1px solid #cdd9e7;
    border-left: 4px solid #3b82f6;
    padding: 8px 14px;
    margin: 8px 0;
    font-family: "Courier New", Courier, monospace;
    color: #0b1f4a;
    overflow-x: auto;
    white-space: nowrap;
}

/* Heavier "main equation" highlight. Combine with .rp-doc-eq. */
#content_intro .rp-doc-eq.rp-doc-key,
#content_description .rp-doc-eq.rp-doc-key {
    background: #eef4ff;
    border: 1px solid #3b82f6;
    border-left: 6px solid #3b82f6;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: bold;
    color: #0b1f4a;
}

/* Amber callout for spec notes / important watch-outs. */
#content_intro .rp-doc-note,
#content_description .rp-doc-note {
    max-width: 800px;
    background: #fff8e6;
    border: 1px solid #f1d49b;
    border-left: 4px solid #f59e0b;
    padding: 8px 14px;
    margin: 10px 0;
    color: #5c4408;
}

#content_intro .rp-doc-note strong,
#content_description .rp-doc-note strong {
    color: #92400e;
}

/* Soft "tip" callout (greenish) for usage hints. */
#content_intro .rp-doc-tip,
#content_description .rp-doc-tip {
    max-width: 800px;
    background: #ecfdf5;
    border: 1px solid #a7d7c5;
    border-left: 4px solid #10b981;
    padding: 8px 14px;
    margin: 10px 0;
    color: #134e4a;
}

#content_intro .rp-doc-tip strong,
#content_description .rp-doc-tip strong {
    color: #065f46;
}

/* Compact reference table. */
#content_intro .rp-doc-table,
#content_description .rp-doc-table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
    max-width: 640px;
}

#content_intro .rp-doc-table th,
#content_intro .rp-doc-table td,
#content_description .rp-doc-table th,
#content_description .rp-doc-table td {
    border: 1px solid #cdd9e7;
    padding: 5px 10px;
    text-align: left;
}

#content_intro .rp-doc-table th,
#content_description .rp-doc-table th {
    background: #eaf0f7;
    color: #143a8a;
}

#content_intro .rp-doc-table td code,
#content_description .rp-doc-table td code {
    background: none;
    padding: 0;
}

/* Two-column section index/table-of-contents at the top of a page. */
.rp-doc-toc,
#content_intro .rp-doc-toc,
#content_description .rp-doc-toc {
    max-width: 800px;
    background: #f5f7ff;
    border: 1px solid #cdd6f7;
    border-left: 4px solid #6366f1;
    padding: 8px 16px;
    margin: 12px 0;
    font-size: 13px;
}

.rp-doc-toc strong,
#content_intro .rp-doc-toc strong,
#content_description .rp-doc-toc strong {
    color: #3730a3;
}

.rp-doc-toc p,
#content_intro .rp-doc-toc p,
#content_description .rp-doc-toc p {
    margin: 0 0 4px 0;
}

.rp-doc-toc ul,
#content_intro .rp-doc-toc ul,
#content_description .rp-doc-toc ul {
    margin: 4px 0;
    padding-left: 22px;
    columns: 2;
    column-gap: 24px;
}

.rp-doc-toc li,
#content_intro .rp-doc-toc li,
#content_description .rp-doc-toc li {
    break-inside: avoid;
    margin: 2px 0;
}

.rp-doc-toc .toc-level-1,
#content_intro .rp-doc-toc .toc-level-1,
#content_description .rp-doc-toc .toc-level-1 {
    margin-left: 14px;
}

.rp-doc-toc .toc-level-2,
#content_intro .rp-doc-toc .toc-level-2,
#content_description .rp-doc-toc .toc-level-2 {
    margin-left: 28px;
}

.rp-doc-toc a,
#content_intro .rp-doc-toc a,
#content_description .rp-doc-toc a {
    color: #3730a3;
    text-decoration: none;
}

.rp-doc-toc a:hover,
#content_intro .rp-doc-toc a:hover,
#content_description .rp-doc-toc a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .rp-doc-toc ul,
    #content_intro .rp-doc-toc ul,
    #content_description .rp-doc-toc ul {
        columns: 1;
    }
}