/* --- JP Standard Documentation Modernization --- */
:root { --jps-bg: #eeeeee; --jps-surface: #ffffff; --jps-text: #333333; --jps-text-light: #666666; --jps-accent: #008a33; --jps-accent-soft: #e8f3eb; --jps-accent-hover: #0a4f24; --jps-gold: #fed100; --jps-border: #cdcdcd; --jps-radius: 6px; --jps-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); --jps-font-sans: "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --jps-font-body: "Plus Jakarta Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --jps-font-marketing: "Montserrat", "Plus Jakarta Sans", "Roboto", Helvetica, Arial, sans-serif; }
.jp-standard-page { background-color: var(--jps-bg); color: var(--jps-text); font-family: var(--jps-font-body); line-height: 1.6; min-height: 100vh; }
.jp-standard-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* --- Header Section --- */
.jp-standard-header { background: var(--jps-surface); border-bottom: 1px solid var(--jps-border); padding: 3rem 0; margin-bottom: 2rem; }
.jp-standard-header-content { max-width: 800px; }
.jp-standard-kicker { color: var(--jps-accent); text-transform: uppercase; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; font-family: var(--jps-font-sans); }
.jp-standard-header h1 { font-family: var(--jps-font-sans); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; line-height: 1.08; color: #1a1d1b; margin-bottom: 1rem; }
.jp-standard-meta { color: var(--jps-text-light); font-weight: 600; font-size: 0.95rem; }
/* --- Main Layout Grid --- */
.jp-standard-grid { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
/* --- Sidebar & TOC --- */
.jp-standard-sidebar { position: sticky; top: 2rem; padding-bottom: 2rem; }
.jp-standard-toc { background: var(--jps-surface); border: 1px solid var(--jps-border); border-radius: var(--jps-radius); padding: 1.5rem; box-shadow: var(--jps-shadow); }
.jp-standard-toc-head { margin-bottom: 1.5rem; border-bottom: 1px solid var(--jps-border); padding-bottom: 1rem; }
.jp-standard-toc-kicker { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--jps-text-light); font-weight: 700; margin-bottom: 0.25rem; }
.jp-standard-toc-head strong { font-size: 0.9rem; color: #1a1d1b; font-family: var(--jps-font-sans); }
.jp-standard-toc-head strong::after { /* Hidden on desktop */ content: ''; }
.jp-standard-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.jp-standard-toc-list a { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--jps-text-light); font-size: 0.9rem; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 6px; transition: all 0.2s ease; }
.jp-standard-toc-list a:hover { background: var(--jps-accent-soft); color: var(--jps-accent); }
.jp-standard-toc-list li.is-active a { background: var(--jps-accent); color: #fff; }
.jp-standard-toc-number { font-size: 0.75rem; opacity: 0.7; font-family: monospace; }
.jp-standard-toc-list li.is-active .jp-standard-toc-number { opacity: 1; }
/* --- Article Content --- */
.jp-standard-article-wrap { /* Prevent horizontal scroll on the whole wrap */ overflow-x: hidden; }
.jp-standard-article { /* Allow tables to scroll if needed on small screens */ background: var(--jps-surface); border: 1px solid var(--jps-border); border-radius: var(--jps-radius); padding: 3rem; box-shadow: var(--jps-shadow); max-width: 860px; overflow-x: auto; }
.jp-standard-lead { font-size: 1.25rem; line-height: 1.7; color: var(--jps-text-light); margin-bottom: 2.5rem; border-bottom: 1px solid var(--jps-border); padding-bottom: 2rem; }
.jp-standard-article h2, .jp-standard-article h3, .jp-standard-article h4 { font-family: var(--jps-font-sans); color: #111; margin-top: 2.5rem; margin-bottom: 1rem; }
.jp-standard-article h2 { font-size: 1.8rem; font-weight: 800; border-left: 4px solid var(--jps-accent); padding-left: 1rem; margin-left: -1rem; }
.jp-standard-article h3 { font-size: 1.4rem; font-weight: 700; }
.jp-standard-article p { margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.8; }
/* --- Lists --- */
.jp-standard-article ul, .jp-standard-article ol { margin-bottom: 2rem; padding-left: 0; list-style-position: inside; }
.jp-standard-article li { margin-bottom: 0.75rem; font-size: 1.1rem; line-height: 1.6; }
.jp-standard-article ul { list-style: none; }
.jp-standard-article ul li { position: relative; padding-left: 1.5rem; }
.jp-standard-article ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background-color: var(--jps-accent); border-radius: 2px; }
.jp-standard-article ol { counter-reset: jps-counter; list-style: none; }
.jp-standard-article ol li { counter-increment: jps-counter; position: relative; padding-left: 2rem; }
.jp-standard-article ol li::before { content: counter(jps-counter) "."; position: absolute; left: 0; font-weight: 800; color: var(--jps-accent); }
/* --- Tables --- */
.jp-standard-article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2.5rem 0; font-size: 1rem; border: 1px solid var(--jps-border); border-radius: 8px; overflow: hidden; }
.jp-standard-article thead th { background: var(--jps-accent); color: #fff; font-weight: 700; text-align: left; padding: 1rem 1.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--jps-font-sans); }
.jp-standard-article td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--jps-border); background: #fff; vertical-align: top; }
.jp-standard-article tr:last-child td { border-bottom: none; }
.jp-standard-article tr:nth-child(even) td { background: #fafafa; }
.jp-standard-article tr:hover td { background: var(--jps-accent-soft); }
/* --- Code & Examples --- */
.jp-standard-article code { background: var(--jps-accent-soft); color: var(--jps-accent); padding: 0.2rem 0.45rem; border-radius: 4px; font-family: monospace; font-size: 0.95em; font-weight: 600; }
.jp-standard-article strong { color: #000; font-weight: 800; }
/* --- Call to Action --- */
.jp-standard-cta { background: #111; color: #fff; padding: 2.5rem; border-radius: var(--jps-radius); margin-top: 4rem; }
.jp-standard-cta h2 { color: #fff !important; margin-top: 0 !important; font-size: 1.5rem !important; font-family: var(--jps-font-marketing); font-weight: 900; }
.jp-standard-cta p { color: #ccc; font-size: 1rem !important; }
.jp-standard-button-row { display: flex; gap: 1rem; margin-top: 2rem; }
.jp-standard-button { background: var(--jps-accent); color: #fff !important; text-decoration: none !important; padding: 0.8rem 1.5rem; border-radius: 6px; font-weight: 700; transition: background 0.2s ease; display: inline-block; }
.jp-standard-button:hover { background: var(--jps-accent-hover); }
.jp-standard-button.secondary { background: transparent; border: 1px solid #fff; }
.jp-standard-button.secondary:hover { background: rgba(255, 255, 255, 0.1); }
.jp-standard-cta-links { margin-top: 1.5rem; font-size: 0.85rem !important; color: #888 !important; }
.jp-standard-cta-links a { color: var(--jps-gold); text-decoration: none; }
.jp-standard-cta-links a:hover { text-decoration: underline; }
/* --- Responsive --- */
@media (max-width: 1024px) {
  .jp-standard-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .jp-standard-sidebar {
    position: static;
    order: -1;
    /* TOC at the top */
    width: 100%
  }
  .jp-standard-toc {
    padding: 0;
    overflow: hidden;
  }
  .jp-standard-toc-head {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    cursor: pointer;
    border-bottom: none;
    user-select: none;
  }
  .jp-standard-toc-head-inner {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .jp-standard-toc.is-expanded .jp-standard-toc-head {
    border-bottom: 1px solid var(--jps-border);
  }
  .jp-standard-toc-head strong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.25rem;
  }
  .jp-standard-toc-head strong::after {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    display: inline-block;
    color: var(--jps-accent);
  }
  .jp-standard-toc.is-expanded .jp-standard-toc-head strong::after {
    transform: rotate(180deg);
  }
  .jp-standard-toc-list {
    max-height: 0;
    padding: 0 1.5rem;
    transition: max-height 0.3s ease, padding 0.3s ease;
    visibility: hidden;
  }
  .jp-standard-toc.is-expanded .jp-standard-toc-list {
    max-height: 1000px;
    padding: 1rem 1.5rem 1.5rem;
    visibility: visible;
  }
  .jp-standard-article {
    padding: 1.5rem;
  }
}
@media (max-width: 640px) {
  .jp-standard-header {
    padding: 2rem 0;
  }
  .jp-standard-button-row {
    flex-direction: column;
  }
  .jp-standard-article {
    border: 1px solid var(--jps-border);
    box-shadow: var(--jps-shadow);
    background: var(--jps-surface);
    padding: 1.25rem;
  }
  .jp-standard-lead {
    font-size: 1.1rem;
  }
}