/* Character Studio Documentation — shared stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root
{
    --bg:          #0e0f11;
    --surface:     #16181c;
    --surface2:    #1e2026;
    --border:      #2a2d35;
    --accent:      #c8a96e;
    --accent-dim:  #7a6440;
    --text:        #d4cfc8;
    --text-dim:    #6b6760;
    --text-bright: #f0ebe3;
    --danger:      #8b3a3a;
    --success:     #3a6b4a;
    --font-mono:   'Geist Mono', monospace;
    --font-serif:  'Instrument Serif', serif;
    --radius:      6px;
}

html, body
{
    min-height:  100%;
    background:  var(--bg);
    color:       var(--text);
    font-family: var(--font-mono);
    font-size:   13px;
    line-height: 1.75;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

#header
{
    background:    var(--surface);
    border-bottom: 1px solid var(--border);
    padding:       0 24px;
    height:        48px;
    display:       flex;
    align-items:   center;
    gap:           16px;
}

.logo
{
    font-family: var(--font-serif);
    font-style:  italic;
    font-size:   20px;
    color:       var(--accent);
    white-space: nowrap;
    text-decoration: none;
}

.header-sub
{
    font-size: 11px;
    color:     var(--text-dim);
}

.header-spacer { flex: 1; }

.header-link
{
    font-size:       11px;
    color:           var(--text-dim);
    text-decoration: none;
    transition:      color 0.15s;
}
.header-link:hover { color: var(--accent); }

/* ── Content ─────────────────────────────────────────────────────────────── */

#content
{
    max-width: 860px;
    margin:    0 auto;
    padding:   40px 24px 100px;
}

/* ── Back / nav links ────────────────────────────────────────────────────── */

.back-link
{
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--text-dim);
    font-size:       12px;
    text-decoration: none;
    margin-bottom:   24px;
    transition:      color 0.15s;
}
.back-link:hover { color: var(--accent); }

/* ── Page title area ─────────────────────────────────────────────────────── */

.chapter-eyebrow
{
    font-size:     11px;
    color:         var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

h1
{
    font-family:   var(--font-serif);
    font-style:    italic;
    font-size:     32px;
    color:         var(--accent);
    margin-bottom: 6px;
}

.subtitle
{
    color:         var(--text-dim);
    font-size:     13px;
    margin-bottom: 40px;
    max-width:     600px;
}

/* ── Chapter TOC ─────────────────────────────────────────────────────────── */

.chapter-toc
{
    list-style:    disc;
    padding:       12px 20px 12px 36px;
    margin:        0 0 40px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
}

.chapter-toc li { margin: 3px 0; }

.chapter-toc a
{
    font-size:       12.5px;
    color:           var(--text-dim);
    text-decoration: none;
    transition:      color 0.15s;
}

.chapter-toc a:hover { color: var(--accent); }

/* ── Section headings ────────────────────────────────────────────────────── */

h2
{
    font-family:   var(--font-serif);
    font-style:    italic;
    font-size:     22px;
    color:         var(--text-bright);
    margin-top:    48px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

h3
{
    font-family:   var(--font-mono);
    font-size:     13px;
    font-weight:   500;
    color:         var(--accent);
    margin-top:    28px;
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}

/* ── Body text ───────────────────────────────────────────────────────────── */

p  { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5em; margin-bottom: 1em; }
li     { margin: 0.3em 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code
{
    background:    var(--surface2);
    padding:       1px 4px;
    border-radius: 3px;
    font-family:   var(--font-mono);
    font-size:     0.9em;
    color:         var(--text-bright);
}

pre
{
    background:    var(--surface2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       16px;
    margin:        16px 0;
    overflow-x:    auto;
    font-family:   var(--font-mono);
    font-size:     0.85em;
    line-height:   1.6;
}

pre code
{
    background:    none;
    padding:       0;
    border-radius: 0;
    font-size:     inherit;
    color:         inherit;
}

kbd
{
    background:    var(--surface2);
    border:        1px solid var(--border);
    border-radius: 3px;
    padding:       1px 6px;
    font-family:   var(--font-mono);
    font-size:     0.85em;
    color:         var(--text-bright);
}

strong { color: var(--text-bright); font-weight: 500; }

/* ── Callout boxes ───────────────────────────────────────────────────────── */

.callout
{
    border-left:   3px solid var(--accent-dim);
    background:    var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding:       12px 16px;
    margin:        24px 0;
    font-size:     12.5px;
}

.callout-label
{
    font-size:      10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  4px;
}

.callout.tip   { border-color: #3a6b4a; }
.callout.tip   .callout-label { color: #6dc48a; }

.callout.warning { border-color: #7a5a20; }
.callout.warning .callout-label { color: #d4a040; }

.callout.note  { border-color: #2a4a6b; }
.callout.note  .callout-label { color: #6aaad4; }

/* ── Chapter cards (TOC) ─────────────────────────────────────────────────── */

.chapter-grid
{
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap:                   14px;
    margin-top:            32px;
}

.chapter-card
{
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--surface);
    overflow:      hidden;
    transition:    border-color 0.15s;
}


.chapter-card-header
{
    display:         block;
    padding:         18px 20px;
    text-decoration: none;
    transition:      background 0.15s;
}

.chapter-card-header:hover
{
    background:      var(--surface2);
    text-decoration: none;
}

.chapter-card-expand
{
    border-top: 1px solid var(--border);
}

.chapter-card-toggle
{
    display:     block;
    padding:     6px 20px;
    font-size:   13px;
    color:       var(--text-dim);
    cursor:      default;
    user-select: none;
    transition:  color 0.15s;
}

.chapter-card-expand:hover .chapter-card-toggle
{
    color: var(--accent);
}

.chapter-card-sections
{
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        0 20px;
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 0.25s ease, padding-bottom 0.2s ease;
}

.chapter-card-expand:hover .chapter-card-sections
{
    max-height:     400px;
    padding-bottom: 12px;
}

.chapter-card-sections a
{
    font-size:       11px;
    color:           var(--text-dim);
    text-decoration: none;
    transition:      color 0.15s;
}

.chapter-card-sections a::before
{
    content: '› ';
    color:   var(--accent-dim);
}

.chapter-card-sections a:hover { color: var(--accent); }

.chapter-card-number
{
    font-size:     10px;
    color:         var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.chapter-card-title
{
    font-family:   var(--font-serif);
    font-style:    italic;
    font-size:     18px;
    color:         var(--accent);
    margin-bottom: 6px;
}

.chapter-card-desc
{
    font-size: 12px;
    color:     var(--text-dim);
    line-height: 1.6;
}

/* ── Chapter navigation ──────────────────────────────────────────────────── */

.chapter-nav
{
    display:       flex;
    gap:           12px;
    margin-top:    60px;
    padding-top:   24px;
    border-top:    1px solid var(--border);
}

.chapter-nav-btn
{
    flex:          1;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--surface);
    padding:       12px 16px;
    text-decoration: none;
    transition:    border-color 0.15s, background 0.15s;
}
.chapter-nav-btn:hover
{
    border-color: var(--accent-dim);
    background:   var(--surface2);
    text-decoration: none;
}
.chapter-nav-btn.prev { text-align: left; }
.chapter-nav-btn.next { text-align: right; }

.nav-direction
{
    font-size:     10px;
    color:         var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.nav-title
{
    font-family: var(--font-serif);
    font-style:  italic;
    font-size:   15px;
    color:       var(--accent);
}

/* ── Step list ───────────────────────────────────────────────────────────── */

.steps { list-style: none; padding: 0; margin: 16px 0; }
.steps li
{
    display:     flex;
    gap:         14px;
    align-items: flex-start;
    margin:      0 0 12px;
}

.step-num
{
    flex-shrink:   0;
    width:         24px;
    height:        24px;
    border-radius: 50%;
    background:    var(--surface2);
    border:        1px solid var(--border);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     11px;
    color:         var(--accent);
    margin-top:    1px;
}

/* ── Feature table ───────────────────────────────────────────────────────── */

.feature-table
{
    width:           100%;
    border-collapse: collapse;
    margin:          16px 0;
    font-size:       12.5px;
}

.feature-table th
{
    text-align:    left;
    color:         var(--text-dim);
    font-size:     10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:       6px 12px;
    border-bottom: 1px solid var(--border);
}

.feature-table td
{
    padding:       8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.feature-table tr:last-child td { border-bottom: none; }

.feature-table td:first-child { color: var(--text-bright); white-space: nowrap; }

/* ── Badge ───────────────────────────────────────────────────────────────── */

.badge
{
    display:       inline-block;
    font-size:     10px;
    padding:       2px 8px;
    border-radius: 10px;
    font-family:   var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.badge-agent    { background: #1e2a3a; color: #6aaad4; border: 1px solid #2a4a6b; }
.badge-advanced { background: #2a2010; color: #d4a040; border: 1px solid #7a5a20; }