@charset "UTF-8";

/*
 * Shared styles for book review pages (pages/book/*.html).
 *
 * Replaces the per-file inline <style> blocks that were written for the old
 * light theme. Every colour comes from the design tokens in style.css, so the
 * pages follow the site theme instead of hardcoding white cards.
 *
 * Each accent block sets its own --accent; the base rules read it.
 */

/* ---------------------------------------------------------------- surfaces */

.concept,
.sectiona,
.skill-container,
.level-container,
.law-container,
.note-card,
.tip-card {
    --accent: var(--color-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--accent);
    border-radius: 12px;
    padding: var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text);
}

.concept > h2:first-child,
.concept > h4:first-child,
.sectiona > h2:first-child,
.sectiona > h4:first-child,
.law-container > h2:first-child,
.law-container > h4:first-child,
.skill-container > h2:first-child,
.skill-container > h4:first-child {
    margin-top: 0;
}

.level {
    margin-bottom: var(--spacing-lg);
}

/* ------------------------------------------------------------ accent boxes */

.example,
.quote,
.highlight,
.case-study,
.principle,
.principle-box,
.key-insight,
.key-principle,
.conclusion,
.keystone-habit,
.heuristic,
.wisdom-box,
.characteristics,
.start-list,
.pivot-type,
.warning-box,
.bias,
.trap,
.philosophy,
.character,
.symbol,
.revolution,
.imagination {
    --accent: var(--color-primary);
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
    color: var(--color-text);
}

/* positive / principle */
.principle,
.principle-box,
.key-insight,
.key-principle,
.conclusion,
.keystone-habit,
.heuristic,
.wisdom-box,
.metric-good {
    --accent: var(--color-success);
}

/* negative / caveat */
.warning-box,
.bias,
.trap,
.metric-bad {
    --accent: var(--color-warning);
}

/* illustrative / factual */
.case-study,
.character,
.revolution,
.characteristics,
.pivot-type {
    --accent: var(--color-info);
}

.quote {
    font-style: italic;
    color: var(--color-text-light);
}

.start-list {
    --accent: var(--color-success);
}

/* -------------------------------------------------------------- lead-ins */

.case-title,
.bias-title,
.heuristic-title,
.warning-title,
.principle-title,
.character-title,
.philosophy-title,
.symbol-title,
.revolution-title,
.imagination-title,
.key-insight-title,
.example-title,
.trap-title,
.system-title,
.level-title {
    display: block;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--spacing-xs);
}

.case-title,
.character-title,
.revolution-title {
    color: var(--color-info);
}

.bias-title,
.warning-title,
.trap-title {
    color: var(--color-warning);
}

.heuristic-title,
.key-insight-title,
.principle-title {
    color: var(--color-success);
}

.philosophy-title,
.symbol-title,
.imagination-title,
.example-title {
    color: var(--color-primary);
}

.essence {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-large);
}

.how-to {
    display: block;
    font-weight: 700;
    color: var(--color-success);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.law-number {
    color: var(--color-primary);
}

/* ----------------------------------------------------------- band headers */

.stage-header,
.concept-header {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    color: var(--color-heading);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    font-weight: 700;
    font-size: var(--font-size-large);
}

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

.comparison {
    margin: var(--spacing-md) 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-row {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

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

.comparison-header {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-heading);
}

.comparison-cell,
.comparison-item {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    min-width: 0;
}

.comparison-item:first-child {
    border-right: 1px solid var(--color-border);
}

/* ------------------------------------------------------------- timelines */

.timeline {
    position: relative;
    padding-left: 60px;
    margin: var(--spacing-lg) 0;
}

.timeline-item {
    position: relative;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px dashed var(--color-border);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-year {
    position: absolute;
    left: -60px;
    top: 0;
    font-weight: 700;
    color: var(--color-primary);
}

/* ------------------------------------------------------------ card grids */

.notes-grid,
.leadership-tips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.leadership-tips {
    grid-template-columns: repeat(2, 1fr);
}

.note-card h4,
.tip-card h4 {
    margin-top: 0;
    color: var(--color-heading);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.note-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.note-card li {
    margin-bottom: var(--spacing-sm);
}

/* --------------------------------------------------- five-level pyramid */

.level-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.level-number {
    flex: 0 0 auto;
    background: var(--color-primary);
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-large);
}

.level-title {
    margin-bottom: 0;
    font-size: 1.3em;
}

/* ---------------------------------------------------------- mini diagrams */

.system-diagram,
.loop-diagram,
.cycle-diagram {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    border-radius: 8px;
    margin: var(--spacing-md) 0;
    text-align: center;
}

.loop-diagram,
.cycle-diagram {
    font-weight: 700;
}

.element,
.cycle-element {
    display: inline-block;
    margin: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 6px;
    font-weight: 700;
}

.system {
    display: inline-block;
    margin: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md);
    width: 200px;
    max-width: 100%;
    vertical-align: top;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-info);
    border-radius: 8px;
    color: var(--color-text);
}

.system .system-title {
    text-align: center;
    color: var(--color-info);
}

.arrow {
    display: inline-block;
    font-size: 24px;
    color: var(--color-text-light);
    vertical-align: middle;
}

/* --------------------------------------------------------- metric compare */

.metric-compare {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    flex-wrap: wrap;
}

.metric-card {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--accent, var(--color-primary));
    color: var(--color-text);
}

/* ------------------------------------------------------------------ misc */

.test-answer {
    color: var(--color-success);
    font-weight: 700;
}

/* inline highlight inside a paragraph */
.mark {
    background: rgba(220, 118, 3, 0.18);
    color: var(--color-heading);
    padding: 0 var(--spacing-xs);
    border-radius: 4px;
}

/* per-block accent overrides used by individual reviews */
.level-container.level-5,
.key-principle.key-principle-warning {
    --accent: var(--color-warning);
}

.level-container.level-5 .level-number {
    background: var(--color-warning);
}

.sectiona.sectiona-info {
    --accent: var(--color-info);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 768px) {
    .notes-grid,
    .leadership-tips {
        grid-template-columns: 1fr;
    }

    .comparison-row {
        flex-direction: column;
    }

    .comparison-item:first-child {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .system {
        display: block;
        width: auto;
        margin: var(--spacing-sm) 0;
    }

    .timeline {
        padding-left: 0;
    }

    .timeline-year {
        position: static;
        display: block;
        margin-bottom: var(--spacing-xs);
    }
}

@media print {
    .concept,
    .sectiona,
    .skill-container,
    .level-container,
    .law-container,
    .note-card,
    .tip-card,
    .system-diagram,
    .loop-diagram,
    .cycle-diagram {
        background: none !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}