/* ============================================
   190 Expanded - Tools section
   Shared chrome for tools/*.html. Page-specific
   rules stay inline, as elsewhere on the site.
   Tokens come from ../total_war/styles/tw3k.css
   ============================================ */

/* ---------- section sub-nav ---------- */

.tool-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem;
    margin: 0 auto 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #252530;
}

.tool-subnav a {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease;
}

.tool-subnav a:hover { color: var(--gold-light); }

.tool-subnav a.active {
    color: var(--title-cream);
    border-bottom-color: var(--gold-dark);
}

/* ---------- intro copy ---------- */

.tool-intro {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    color: var(--text-secondary);
    text-align: center;
}

.tool-intro a { color: var(--gold-light); text-decoration: none; }
.tool-intro a:hover { text-decoration: underline; }

/* ---------- version chip ---------- */

.ver-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    border: 1px solid #303035;
    border-left: 3px solid var(--gold-dark);
    background: var(--bg-secondary);
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

.ver-chip .ver-date {
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: none;
}

.ver-chip.unknown { border-left-color: #3a3a44; color: var(--text-muted); }

/* ---------- tool cards on the hub ---------- */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid #252530;
    border-top: 3px solid var(--gold-dark);
    padding: 1.75rem;
}

.tool-card h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--title-cream);
    margin-bottom: 0.4rem;
}

.tool-card .tool-glyph {
    font-size: 2rem;
    color: var(--gold-primary);
    opacity: 0.85;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.tool-card .tool-lede {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0.75rem 0 1rem;
}

.tool-card ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tool-card ul li {
    padding: 0.3rem 0 0.3rem 1.1rem;
    position: relative;
}

.tool-card ul li::before {
    content: '·';
    position: absolute;
    left: 0.2rem;
    color: var(--gold-dark);
    font-weight: 700;
}

.tool-card .tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ---------- screenshot ---------- */

figure.shot {
    margin: 2.5rem 0;
    text-align: center;
}

figure.shot img {
    max-width: 100%;
    height: auto;
    border: 1px solid #303035;
    background: var(--bg-secondary);
}

figure.shot figcaption {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ---------- prose blocks on the doc pages ---------- */

.doc {
    max-width: 880px;
    margin: 0 auto;
}

.doc section { margin-bottom: 3rem; }

.doc h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    color: var(--title-cream);
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #252530;
}

.doc h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    color: var(--gold-light);
    margin: 1.75rem 0 0.6rem;
}

.doc p { margin-bottom: 0.9rem; color: var(--text-secondary); }

.doc a { color: var(--gold-light); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

.doc ul, .doc ol {
    margin: 0 0 1rem 1.2rem;
    color: var(--text-secondary);
}

.doc li { margin-bottom: 0.4rem; }

.doc strong { color: var(--text-primary); }

/* inline code + code blocks (shared with the generated API reference) */

code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.88em;
    color: var(--gold-light);
    background: rgba(201, 162, 39, 0.07);
    border: 1px solid rgba(201, 162, 39, 0.15);
    padding: 0.05em 0.35em;
    /* NOT nowrap: a long signature in a code span would set an unshrinkable min-content
       width and push the whole grid column past the viewport. */
    overflow-wrap: break-word;
}

pre {
    background: #08080a;
    border: 1px solid #252530;
    border-left: 3px solid var(--gold-dark);
    padding: 1rem 1.1rem;
    overflow-x: auto;
    margin: 0 0 1.1rem;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    color: #d7d2c4;
    font-size: 0.86rem;
    line-height: 1.55;
    white-space: pre;
}

/* ---------- tables ---------- */

.doc-table { overflow-x: auto; margin: 0 0 1.2rem; }

.doc-table table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
}

.doc-table th {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
    padding: 0.55rem 0.7rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid #303035;
    white-space: nowrap;
}

.doc-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #1c1c22;
    color: var(--text-secondary);
    vertical-align: top;
}

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

/* ---------- callouts ---------- */

.note {
    border: 1px solid #252530;
    border-left: 3px solid #4a6fa5;
    background: var(--bg-card);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.note.warn { border-left-color: #b8860b; }
.note.caution { border-left-color: var(--red-accent); }

.note .note-title {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--title-cream);
    margin-bottom: 0.4rem;
}

/* ---------- status dot legend ---------- */

.dot-legend { margin: 0 0 1.2rem; }

.dot-legend .row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1c1c22;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.dot-legend .row:last-child { border-bottom: none; }

.dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translateY(1px);
}

.dot.green { background: #4f9d5d; }
.dot.amber { background: #c9a227; }
.dot.red { background: #b3302f; }
.dot.grey { background: none; border: 1px solid #6a6a74; }

.se-chip {
    flex: none;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
    padding: 0.05rem 0.3rem;
}

@media (max-width: 768px) {
    .tool-subnav { gap: 1rem; }
    .tool-card { padding: 1.25rem; }
}