/* eme_docs.css — shared stylesheet for EMETest / EME Batch SNR Analyser documentation */

/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-bg:          #f7f8fa;
    --color-surface:     #ffffff;
    --color-border:      #d0d4db;
    --color-text:        #1a1d23;
    --color-text-muted:  #5a6070;
    --color-accent:      #1a5fa8;
    --color-accent-lt:   #e8f0fb;
    --color-note-bg:     #fffbe6;
    --color-note-border: #f0c040;
    --color-warn-bg:     #fff2f2;
    --color-warn-border: #e04040;
    --color-code-bg:     #f0f2f5;
    --color-nav-bg:      #1e2535;
    --color-nav-text:    #c8d0e0;
    --color-nav-hover:   #ffffff;
    --color-nav-active:  #4a9eff;
    --font-body:         Georgia, 'Times New Roman', serif;
    --font-ui:           system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:         'Consolas', 'Courier New', monospace;
    --max-width:         860px;
    --nav-width:         220px;
}

html { font-size: 16px; }

body {
    font-family:     var(--font-body);
    background:      var(--color-bg);
    color:           var(--color-text);
    line-height:     1.7;
    display:         flex;
    min-height:      100vh;
}

/* ── Side navigation ──────────────────────────────────────────────── */
nav#sidenav {
    width:         var(--nav-width);
    min-width:     var(--nav-width);
    background:    var(--color-nav-bg);
    padding:       2rem 0 3rem 0;
    position:      sticky;
    top:           0;
    height:        100vh;
    overflow-y:    auto;
    flex-shrink:   0;
}

nav#sidenav .nav-title {
    font-family:   var(--font-ui);
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:         #7a8aaa;
    padding:       0 1.2rem 0.6rem 1.2rem;
    border-bottom: 1px solid #2e3a50;
    margin-bottom: 0.6rem;
}

nav#sidenav a {
    display:       block;
    font-family:   var(--font-ui);
    font-size:     0.88rem;
    color:         var(--color-nav-text);
    text-decoration: none;
    padding:       0.45rem 1.2rem;
    border-left:   3px solid transparent;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
}

nav#sidenav a:hover {
    background:    rgba(255,255,255,0.07);
    color:         var(--color-nav-hover);
    border-left-color: #4a7ab8;
}

nav#sidenav a.active {
    color:         var(--color-nav-active);
    border-left-color: var(--color-nav-active);
    background:    rgba(74,158,255,0.10);
    font-weight:   600;
}

nav#sidenav .nav-section {
    font-family:   var(--font-ui);
    font-size:     0.70rem;
    font-weight:   700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:         #8A9bb4;
    padding:       1.0rem 1.2rem 0.3rem 1.2rem;
}

/* ── Main content area ────────────────────────────────────────────── */
main {
    flex:        1;
    padding:     2.5rem 2.8rem 4rem 2.8rem;
    max-width:   var(--max-width);
}

/* ── Typography ───────────────────────────────────────────────────── */
h1 {
    font-family:  var(--font-ui);
    font-size:    1.85rem;
    font-weight:  700;
    color:        var(--color-accent);
    margin-bottom: 0.3rem;
    line-height:  1.25;
}

h1 + .subtitle {
    font-family:  var(--font-ui);
    font-size:    0.95rem;
    color:        var(--color-text-muted);
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid var(--color-border);
}

h2 {
    font-family:  var(--font-ui);
    font-size:    1.25rem;
    font-weight:  700;
    color:        var(--color-text);
    margin-top:   2.2rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-border);
}

h3 {
    font-family:  var(--font-ui);
    font-size:    1.05rem;
    font-weight:  600;
    color:        var(--color-accent);
    margin-top:   1.6rem;
    margin-bottom: 0.4rem;
}

h4 {
    font-family:  var(--font-ui);
    font-size:    0.95rem;
    font-weight:  600;
    color:        var(--color-text);
    margin-top:   1.1rem;
    margin-bottom: 0.3rem;
}

p {
    margin-bottom: 0.9rem;
}

/* ── Lists ────────────────────────────────────────────────────────── */
ol, ul {
    margin-left:   1.6rem;
    margin-bottom: 0.9rem;
}

ol li, ul li {
    margin-bottom: 0.35rem;
}

ol ol, ul ul, ol ul, ul ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* ── Tables ───────────────────────────────────────────────────────── */
table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.2rem 0;
    font-family:     var(--font-ui);
    font-size:       0.9rem;
}

th {
    background:    var(--color-accent);
    color:         #ffffff;
    font-weight:   600;
    padding:       0.55rem 0.85rem;
    text-align:    left;
}

td {
    padding:       0.5rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

tr:nth-child(even) td { background: var(--color-accent-lt); }

/* ── Code / monospace ─────────────────────────────────────────────── */
code {
    font-family:  var(--font-mono);
    font-size:    0.88em;
    background:   var(--color-code-bg);
    border:       1px solid var(--color-border);
    border-radius: 3px;
    padding:      0.10em 0.35em;
}

/* ── Note / warning boxes ─────────────────────────────────────────── */
.note {
    background:   var(--color-note-bg);
    border-left:  4px solid var(--color-note-border);
    padding:      0.75rem 1rem;
    margin:       1rem 0;
    border-radius: 0 4px 4px 0;
    font-family:  var(--font-ui);
    font-size:    0.92rem;
}

.warning {
    background:   var(--color-warn-bg);
    border-left:  4px solid var(--color-warn-border);
    padding:      0.75rem 1rem;
    margin:       1rem 0;
    border-radius: 0 4px 4px 0;
    font-family:  var(--font-ui);
    font-size:    0.92rem;
}

.note strong, .warning strong {
    display:      block;
    margin-bottom: 0.2rem;
}

/* ── Step blocks ──────────────────────────────────────────────────── */
.step {
    display:      flex;
    gap:          1rem;
    margin:       1.0rem 0;
    align-items:  flex-start;
}

.step-num {
    font-family:  var(--font-ui);
    font-size:    0.85rem;
    font-weight:  700;
    min-width:    2rem;
    height:       2rem;
    line-height:  2rem;
    text-align:   center;
    background:   var(--color-accent);
    color:        #fff;
    border-radius: 50%;
    flex-shrink:  0;
}

.step-body {
    padding-top:  0.2rem;
    flex: 1;
}

.step-body p:last-child { margin-bottom: 0; }

/* ── Definition list (for parameter reference) ────────────────────── */
dl { margin-bottom: 0.9rem; }
dt {
    font-family:  var(--font-ui);
    font-weight:  600;
    color:        var(--color-accent);
    margin-top:   0.75rem;
}
dd {
    margin-left:  1.4rem;
    margin-bottom: 0.3rem;
    font-size:    0.95rem;
}

/* ── Horizontal rule ──────────────────────────────────────────────── */
hr {
    border:       none;
    border-top:   1px solid var(--color-border);
    margin:       2rem 0;
}

/* ── Page footer ──────────────────────────────────────────────────── */
footer {
    font-family:  var(--font-ui);
    font-size:    0.80rem;
    color:        var(--color-text-muted);
    margin-top:   3rem;
    padding-top:  1rem;
    border-top:   1px solid var(--color-border);
}

/* ── Responsive: collapse nav on narrow screens ───────────────────── */
@media (max-width: 700px) {
    body          { flex-direction: column; }
    nav#sidenav   { width: 100%; height: auto; position: static; padding: 1rem 0; }
    nav#sidenav a { display: inline-block; padding: 0.3rem 0.8rem; }
    main          { padding: 1.5rem 1.2rem; }
}