/* ============================================
   COMPONENTS - Abstraction Cheatsheet
   Cards, code blocks, diagrams, visualizations
   ============================================ */

/* ============================================
   CODE COMPARISON CARDS
   ============================================ */
.comparison-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: var(--space-xl) 0;
    box-shadow: var(--shadow-md);
}

.comparison-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
}

.comparison-card__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.comparison-card__example-num {
    font-size: var(--text-sm);
    color: var(--accent-blue);
    font-weight: 500;
}

.comparison-card__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-default);
}

.comparison-card__side {
    background: var(--bg-secondary);
    padding: var(--space-md);
}

.comparison-card__side-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-muted);
}

.comparison-card__side-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
}

.comparison-card__side-icon--code {
    background: var(--glow-blue);
    color: var(--accent-blue);
}

.comparison-card__side-icon--abstraction {
    background: var(--glow-purple);
    color: var(--accent-purple);
}

.comparison-card__side-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.comparison-card__footer {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--glow-green), var(--glow-blue));
    border-top: 1px solid var(--border-default);
}

.comparison-card__compression {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.comparison-card__compression-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--accent-green);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-sm);
}

.comparison-card__compression-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.comparison-card__compression-text strong {
    color: var(--accent-green);
}

/* Responsive */
@media (max-width: 768px) {
    .comparison-card__content {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.code-block {
    position: relative;
    margin: var(--space-md) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--code-bg);
    border: 1px solid var(--border-default);
}

.code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-muted);
}

.code-block__language {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-block__copy {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
}

.code-block__copy:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.code-block__copy.copied {
    color: var(--accent-green);
}

.code-block__pre {
    margin: 0;
    padding: var(--space-md);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.code-block__pre code {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
}

/* Line Numbers */
.code-block--with-lines .code-block__pre {
    counter-reset: line;
}

.code-block--with-lines .code-block__pre code .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 2em;
    margin-right: 1em;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
}

/* ============================================
   SYNTAX HIGHLIGHTING (Custom Theme)
   ============================================ */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--code-comment);
    font-style: italic;
}

.token.punctuation {
    color: var(--text-secondary);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: var(--code-number);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--code-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: var(--code-operator);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: var(--code-keyword);
}

.token.function,
.token.class-name {
    color: var(--code-function);
}

.token.regex,
.token.important,
.token.variable {
    color: var(--code-variable);
}

/* ============================================
   CONCEPT CARDS (Core Idea, Notation)
   ============================================ */
.concept-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.concept-card--core {
    border-left: 4px solid var(--accent-blue);
    background: linear-gradient(90deg, var(--glow-blue), transparent);
}

.concept-card--notation {
    border-left: 4px solid var(--accent-purple);
    background: linear-gradient(90deg, var(--glow-purple), transparent);
}

.concept-card__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.concept-card--core .concept-card__label {
    color: var(--accent-blue);
}

.concept-card--notation .concept-card__label {
    color: var(--accent-purple);
}

.concept-card__content {
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.concept-card__content code {
    background: var(--bg-tertiary);
    color: var(--accent-cyan);
}

/* ============================================
   FSM DIAGRAM
   ============================================ */
.fsm-diagram {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    min-height: 300px;
    position: relative;
}

.fsm-diagram__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-muted);
}

.fsm-diagram__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.fsm-diagram__controls {
    display: flex;
    gap: var(--space-sm);
}

.fsm-diagram__btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fsm-diagram__btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.fsm-diagram__btn--primary {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.fsm-diagram__btn--primary:hover {
    background: #4a9eff;
}

.fsm-diagram__canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* FSM States (SVG Styles) */
.fsm-state {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fsm-state:hover .fsm-state__circle {
    filter: brightness(1.2);
    stroke: var(--accent-blue);
}

.fsm-state__circle {
    fill: var(--bg-tertiary);
    stroke: var(--border-default);
    stroke-width: 2;
    transition: all var(--transition-fast);
}

.fsm-state.active .fsm-state__circle {
    fill: var(--glow-blue);
    stroke: var(--accent-blue);
    stroke-width: 3;
}

.fsm-state.accepting .fsm-state__circle {
    stroke-width: 2;
}

.fsm-state.accepting .fsm-state__inner-circle {
    fill: none;
    stroke: var(--border-default);
    stroke-width: 2;
}

.fsm-state__label {
    fill: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}

.fsm-state.active .fsm-state__label {
    fill: var(--accent-blue);
}

/* FSM Transitions */
.fsm-transition {
    cursor: pointer;
}

.fsm-transition__path {
    fill: none;
    stroke: var(--border-default);
    stroke-width: 2;
    marker-end: url(#arrowhead);
    transition: stroke var(--transition-fast);
}

.fsm-transition.active .fsm-transition__path {
    stroke: var(--accent-blue);
    stroke-width: 3;
}

.fsm-transition__label {
    fill: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    text-anchor: middle;
}

.fsm-transition.active .fsm-transition__label {
    fill: var(--accent-blue);
}

/* ============================================
   PETRI NET DIAGRAM
   ============================================ */
.petri-net {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.petri-net__place {
    cursor: pointer;
}

.petri-net__place-circle {
    fill: var(--bg-tertiary);
    stroke: var(--viz-node);
    stroke-width: 2;
}

.petri-net__place-label {
    fill: var(--text-secondary);
    font-size: 11px;
    text-anchor: middle;
}

.petri-net__token {
    fill: var(--viz-token);
    transition: all var(--transition-base);
}

.petri-net__transition {
    cursor: pointer;
}

.petri-net__transition-rect {
    fill: var(--bg-elevated);
    stroke: var(--text-muted);
    stroke-width: 2;
    transition: all var(--transition-fast);
}

.petri-net__transition.enabled .petri-net__transition-rect {
    fill: var(--glow-green);
    stroke: var(--viz-node);
}

.petri-net__transition-label {
    fill: var(--text-secondary);
    font-size: 11px;
    text-anchor: middle;
}

.petri-net__arc {
    fill: none;
    stroke: var(--border-default);
    stroke-width: 1.5;
    marker-end: url(#arrowhead);
}

/* ============================================
   TYPE DERIVATION TREE
   ============================================ */
.type-tree {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    overflow-x: auto;
}

.type-tree__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.type-tree__premises {
    display: flex;
    gap: var(--space-xl);
    padding-bottom: var(--space-sm);
}

.type-tree__inference-line {
    width: 100%;
    height: 2px;
    background: var(--text-muted);
    position: relative;
}

.type-tree__rule-name {
    position: absolute;
    right: -2em;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-xs);
    color: var(--accent-blue);
    font-family: var(--font-mono);
}

.type-tree__conclusion {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
    padding-top: var(--space-sm);
}

.type-tree__judgment {
    background: var(--bg-tertiary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* ============================================
   INFO BOXES (Notes, Tips, Warnings)
   ============================================ */
.info-box {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    display: flex;
    gap: var(--space-md);
}

.info-box__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
}

.info-box__content {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.info-box--note {
    background: var(--glow-blue);
    border: 1px solid rgba(88, 166, 255, 0.3);
}

.info-box--note .info-box__icon {
    background: var(--accent-blue);
    color: white;
}

.info-box--tip {
    background: var(--glow-green);
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.info-box--tip .info-box__icon {
    background: var(--accent-green);
    color: white;
}

.info-box--warning {
    background: rgba(240, 136, 62, 0.1);
    border: 1px solid rgba(240, 136, 62, 0.3);
}

.info-box--warning .info-box__icon {
    background: var(--accent-orange);
    color: white;
}

/* ============================================
   QUICK REFERENCE CARD
   ============================================ */
.quick-ref {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-modal);
}

.quick-ref__toggle {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    border: none;
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.quick-ref__toggle:hover {
    transform: scale(1.05);
}

.quick-ref__panel {
    position: absolute;
    bottom: calc(100% + var(--space-md));
    right: 0;
    width: 400px;
    max-height: 70vh;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.quick-ref__panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quick-ref__header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
    font-weight: 600;
}

.quick-ref__content {
    padding: var(--space-md);
    overflow-y: auto;
    max-height: calc(70vh - 60px);
}

.quick-ref__table {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
}

.quick-ref__table th,
.quick-ref__table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-muted);
}

.quick-ref__table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-ref__table td:first-child {
    color: var(--accent-blue);
    font-weight: 500;
}

@media (max-width: 768px) {
    .quick-ref__panel {
        width: calc(100vw - var(--space-lg) * 2);
        right: calc(-1 * (100vw - var(--space-lg) * 2 - 56px));
    }
}

/* ============================================
   PROGRESS INDICATOR
   ============================================ */
.progress-bar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bg-tertiary);
    z-index: var(--z-fixed);
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    width: 0%;
    transition: width var(--transition-fast);
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--part {
    background: var(--glow-purple);
    color: var(--accent-purple);
}

.badge--section {
    background: var(--glow-blue);
    color: var(--accent-blue);
}

.badge--example {
    background: var(--glow-green);
    color: var(--accent-green);
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-tertiary) 0%,
            var(--bg-elevated) 50%,
            var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton--text {
    height: 1em;
    width: 100%;
}

.skeleton--title {
    height: 2em;
    width: 60%;
}

.skeleton--code {
    height: 200px;
}