/** * CHAYKA AI Summary — Frontend Styles (Layer 1) * * IMPORTANT: This file and inject_critical_styles() (Layer 2) must carry * IDENTICAL rules. If you edit here, edit the inline version too. * * 4 contrast modes: default + dark + high-contrast + sepia * Modes are set by Accessibility plugin via data-ipca-mode on . * * @package Chayka\Summary */ /* ── Default mode ────────────────────────────────────────────────── */ .chayka-summary { --cs-bg: rgba(255, 191, 0, 0.05); --cs-border: #ffbf00; --cs-text: inherit; --cs-bullet: #d4a000; --cs-footer: rgba(0, 0, 0, 0.4); margin: 1.5em 0; padding: 0; border: 0; border-left: 3px solid var(--cs-border); border-radius: 0 6px 6px 0; background: var(--cs-bg); font-size: 0.95em; line-height: 1.6; } .chayka-summary-details { padding: 0; } .chayka-summary-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--cs-text); } .chayka-summary-toggle::-webkit-details-marker { display: none; } .chayka-summary-toggle::marker { display: none; content: ""; } .chayka-summary-icon { font-size: 1.1em; color: var(--cs-bullet); } .chayka-summary-chevron::after { content: "▼"; font-size: 0.65em; transition: transform 0.2s; display: inline-block; } .chayka-summary-details[open] .chayka-summary-chevron::after { transform: rotate(180deg); } .chayka-summary-body { padding: 0 14px 12px; } .chayka-summary-list { margin: 0 0 8px 18px; padding: 0; } .chayka-summary-list li { margin-bottom: 6px; color: var(--cs-text); } .chayka-summary-list li::marker { color: var(--cs-bullet); } .chayka-summary-footer { margin-top: 8px; } .chayka-summary-footer small { font-size: 0.75em; color: var(--cs-footer); opacity: 0.6; } /* ── Dark mode ───────────────────────────────────────────────────── */ [data-ipca-mode="dark"] .chayka-summary { --cs-bg: rgba(255, 211, 81, 0.07); --cs-border: #ffd351; --cs-text: #e0e0e0; --cs-bullet: #ffd351; --cs-footer: rgba(255, 255, 255, 0.4); } /* ── High contrast ───────────────────────────────────────────────── */ [data-ipca-mode="high-contrast"] .chayka-summary { --cs-bg: rgba(255, 255, 0, 0.04); --cs-border: #ffff00; --cs-text: #ffffff; --cs-bullet: #ffff00; --cs-footer: #ffffff; } [data-ipca-mode="high-contrast"] .chayka-summary-footer small { opacity: 1; } /* ── Sepia ────────────────────────────────────────────────────────── */ [data-ipca-mode="sepia"] .chayka-summary { --cs-bg: rgba(196, 154, 32, 0.06); --cs-border: #c49a20; --cs-text: #3e2c1c; --cs-bullet: #c49a20; --cs-footer: rgba(62, 44, 28, 0.5); } /* ── Text format (paragraphs) ────────────────────────────────────── */ .chayka-summary-body p { margin: 0 0 8px; color: var(--cs-text); } .chayka-summary-body p:last-of-type { margin-bottom: 0; } /* ── TagDiv Newspaper theme override ─────────────────────────────── */ /* Theme applies .tagdiv-type ul { padding-left: 15px; margin-bottom: 26px; } which inflates our summary list. Override with higher specificity. */ .tagdiv-type .chayka-summary-list { margin: 0 0 8px 18px; padding: 0; } .tagdiv-type .chayka-summary-list li { margin-bottom: 6px; } /* ── Mobile ──────────────────────────────────────────────────────── */ @media (max-width: 600px) { .chayka-summary { margin: 1em 0; } .chayka-summary-toggle { padding: 8px 10px; gap: 6px; font-size: 0.9em; } .chayka-summary-body { padding: 0 10px 10px; } .chayka-summary-list { margin-left: 14px; } .chayka-summary-list li { margin-bottom: 4px; font-size: 0.9em; } /* TagDiv mobile override */ .tagdiv-type .chayka-summary-list { margin: 0 0 8px 14px; padding: 0; } .tagdiv-type .chayka-summary-list li { margin-bottom: 4px; } .chayka-summary-body p { font-size: 0.9em; } }