/* 
   📝 CHIRA-SCHOOLBOOK MASTER STYLESHEET V2 (Improved Callout Visibility & Restored Bento Labels)
   Vibe: Modern Textbook / High Legibility / Clean Borders / Zero Glare
   Author: Eira (Refined from Pulse-chan)
   Timestamp: [2026-05-22 11:55]
   Standard: Fixed label cropping, restored Bento structure, and fixed strip alignment using GRID.
*/

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --chira-bg-dark: #fbfaf7;
    --chira-bg-card: #ffffff;
    --chira-border-color: #334155;
    --chira-text: #0f172a;
    --chira-text-muted: #475569;
    --chira-core-color: #0f766e;
    --chira-core-bg: #f0fdfa;
    --chira-accent-color: #be123c;
    --chira-accent-bg: #fff1f2;
    --chira-grammar-color: #b45309;
    --chira-grammar-bg: #fffbeb;
    --chira-interactive-color: #1d4ed8;
    --chira-interactive-bg: #eff6ff;
    --chira-drill-color: #1e293b;
    --chira-drill-bg: #f8fafc;
    --chira-stripes: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 7px, #cbd5e1 7px, #cbd5e1 14px);
    --chira-grid-pattern: radial-gradient(circle, rgba(51, 65, 85, 0.05) 1px, transparent 1px);
    --chira-focus-glow: 0 0 0 3px rgba(29, 78, 216, 0.4);
}

.theme-dark {
    --chira-bg-dark: #0f172a;
    --chira-bg-card: #1e293b;
    --chira-border-color: #94a3b8;
    --chira-text: #f8fafc;
    --chira-text-muted: #cbd5e1;
    --chira-core-color: #2dd4bf;
    --chira-core-bg: #115e59;
    --chira-accent-color: #fb7185;
    --chira-accent-bg: #9f1239;
    --chira-grammar-color: #fbbf24;
    --chira-grammar-bg: #78350f;
    --chira-interactive-color: #60a5fa;
    --chira-interactive-bg: #1e40af;
    --chira-drill-color: #f8fafc;
    --chira-drill-bg: #334155;
    --chira-stripes: repeating-linear-gradient(-45deg, #0f172a, #0f172a 7px, #334155 7px, #334155 14px);
    --chira-grid-pattern: radial-gradient(circle, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    --chira-focus-glow: 0 0 0 3px rgba(96, 165, 250, 0.5);
}

/* Base Elements */
.markdown-rendered p { font-family: 'Lexend', sans-serif !important; line-height: 1.8 !important; font-size: 1.05rem !important; color: var(--chira-text) !important; margin-bottom: 1.2em !important; }
.markdown-rendered table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; }
.markdown-rendered th { background-color: var(--chira-border-color) !important; color: var(--chira-bg-card) !important; padding: 12px !important; border: 2px solid var(--chira-border-color) !important; }
.markdown-rendered td { background-color: var(--chira-bg-card) !important; color: var(--chira-text) !important; border: 2px solid var(--chira-border-color) !important; padding: 12px !important; }

/* Bento Grid */
.chira-bento { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; margin: 25px 0; }
.chira-bento div {
    background: var(--chira-bg-card);
    border: 2px solid var(--chira-border-color);
    padding: 20px;
    border-radius: 8px;
    position: relative;
    background-size: 20px 20px;
    background-image: var(--chira-grid-pattern);
    overflow: visible;
}
.chira-bento div::before {
    content: "[INFO]";
    position: absolute;
    top: 6px;
    left: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--chira-text-muted);
}
.chira-bento .span-two { grid-column: span 2; }
.chira-bento .major-node { border-left: 6px solid var(--chira-core-color); }
.chira-bento h4 { font-family: 'Lexend', sans-serif !important; font-weight: 700; margin-top: 0 !important; margin-bottom: 12px !important; }

/* Callouts V2 Fixed */
.chira-core, .callout[data-callout="chira-core"] { background-color: var(--chira-core-bg) !important; border: 2px solid var(--chira-border-color) !important; border-left: 8px solid var(--chira-core-color) !important; border-radius: 8px !important; padding: 20px !important; margin: 30px 0 !important; position: relative; overflow: visible !important; }
.chira-core::before, .callout[data-callout="chira-core"]::before { content: "[CORE CONCEPT]"; position: absolute; top: -8px; right: 15px; background: var(--chira-core-color); color: #ffffff; font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: bold; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--chira-border-color); z-index: 10; }

.chira-accent, .callout[data-callout="chira-accent"] { background-color: var(--chira-accent-bg) !important; border: 2px solid var(--chira-border-color) !important; border-left: 8px solid var(--chira-accent-color) !important; border-radius: 8px !important; padding: 20px !important; margin: 30px 0 !important; position: relative; overflow: visible !important; }
.chira-accent::before, .callout[data-callout="chira-accent"]::before { content: "[VOCABULARY]"; position: absolute; top: -8px; right: 15px; background: var(--chira-accent-color); color: #ffffff; font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: bold; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--chira-border-color); z-index: 10; }

.chira-grammar, .callout[data-callout="chira-grammar"] { background-color: var(--chira-grammar-bg) !important; border: 2px solid var(--chira-border-color) !important; border-left: 8px solid var(--chira-grammar-color) !important; border-radius: 8px !important; padding: 20px !important; margin: 30px 0 !important; position: relative; overflow: visible !important; }
.chira-grammar::before, .callout[data-callout="chira-grammar"]::before { content: "[GRAMMAR FOCUS]"; position: absolute; top: -8px; right: 15px; background: var(--chira-grammar-color); color: #ffffff; font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: bold; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--chira-border-color); z-index: 10; }

.chira-drill, .callout[data-callout="chira-drill"] { background-color: var(--chira-drill-bg) !important; border: 2px solid var(--chira-border-color) !important; border-left: 8px solid var(--chira-drill-color) !important; border-radius: 8px !important; padding: 20px !important; margin: 30px 0 !important; position: relative; overflow: visible !important; }
.chira-drill::before, .callout[data-callout="chira-drill"]::before { content: "[PRACTICE QUIZ]"; position: absolute; top: -8px; right: 15px; background: var(--chira-drill-color); color: #ffffff; font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: bold; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--chira-border-color); z-index: 10; }

/* Structural helpers */
.chira-split { display: flex; flex-wrap: wrap; gap: 15px; margin: 25px 0; }
.chira-split div { flex: 1 1 200px; background: var(--chira-bg-card); border: 2px solid var(--chira-border-color); padding: 20px; border-radius: 8px; }
.chira-split .split-gold { border-top: 5px solid var(--chira-grammar-color); }
.chira-split .split-pink { border-top: 5px solid var(--chira-accent-color); }

/* FIXED STRIP LISTS: Using Grid instead of Flex for perfect alignment */
.chira-strip { list-style: none !important; padding: 0 !important; margin: 25px 0 !important; border: 2px solid var(--chira-border-color); border-radius: 8px; overflow: hidden; }
.chira-strip li { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr; /* Strict 50/50 split ensures perfect alignment */
    align-items: center; 
    padding: 12px 20px !important; 
    border-bottom: 1px solid var(--chira-border-color); 
    background: var(--chira-bg-card);
    gap: 15px; 
}
.chira-strip li:last-child { border-bottom: none; }

.chira-strip li.chira-strip-header { 
    background: var(--chira-border-color) !important; 
}

/* Header Text Styles */
.chira-strip li.chira-strip-header span {
    font-family: 'Space Mono', monospace; 
    font-size: 0.8rem; 
    font-weight: bold;
    color: var(--chira-bg-card) !important;
}

/* Data Row Text Styles */
.chira-strip li .label { 
    font-family: 'Lexend', sans-serif; 
    color: var(--chira-text); 
    font-weight: 600;
}
.chira-strip li .val { 
    font-family: 'Space Mono', monospace; 
    color: var(--chira-core-color); 
    font-weight: bold;
}

/* Shared Alignment: Left column is Left, Right column is Right */
.chira-strip li .label, .chira-strip li.chira-strip-header span:first-child { 
    text-align: left;
}
.chira-strip li .val, .chira-strip li.chira-strip-header span:last-child { 
    text-align: right;
}

.callout-title { font-family: 'Lexend', sans-serif; font-weight: 700; margin-bottom: 8px; }
.callout-content { font-family: 'Lexend', sans-serif; color: var(--chira-text); }
.jp { font-size: 1.5rem; font-weight: 600; }