/* ══════════════════════════════════════════════════════════ Campaign Forge Stylesheet Uses site CSS custom properties from main_style.css. Dark mode: .dark selector (matches site convention). Namespace: --cf-* (mirrors Map Generator's --mg-* pattern) ══════════════════════════════════════════════════════════ */ /* ── Theme System — CSS Custom Properties ──────────────── */ /* Light mode (default) */ .campaign-forge-container { --cf-header-height: 6rem; --cf-sidebar-width: 280px; --cf-sidebar-collapsed-width: 52px; --cf-panel-max-width: 720px; --cf-touch-target: 44px; --cf-transition: 0.3s ease; --cf-radius: 8px; --cf-radius-lg: 12px; --cf-radius-sm: 6px; /* Colors — bridge to site globals */ --cf-bg-primary: var(--background-light, #f4f6f9); --cf-bg-secondary: var(--card-bg, #ffffff); --cf-bg-panel: var(--section-gradient-end, #e6e9ed); --cf-bg-input: rgba(0, 0, 0, 0.04); --cf-bg-hover: rgba(74, 105, 189, 0.08); --cf-bg-active: rgba(74, 105, 189, 0.15); --cf-text: var(--text-dark, #34495e); --cf-text-muted: var(--text-secondary, #7f8c8d); --cf-text-heading: var(--primary-color, #4a69bd); --cf-text-light: var(--text-light, #ecf0f1); --cf-accent: var(--primary-color, #4a69bd); --cf-accent-light: var(--primary-color-light, #6c8cd5); --cf-accent-rgb: var(--primary-color-rgb, 74, 105, 189); --cf-accent-glow: rgba(var(--primary-color-rgb, 74, 105, 189), 0.4); --cf-border: var(--border-color, #d1d5db); --cf-border-strong: rgba(0, 0, 0, 0.15); --cf-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --cf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12); --cf-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15); /* Semantic colors */ --cf-success: var(--success-color, #28a745); --cf-warning: var(--warning-color, #f59e0b); --cf-danger: var(--error-color, #e74c3c); --cf-info: var(--info-color, #3b82f6); /* Button colors — match site */ --cf-btn-primary-bg: var(--button-primary, #e84118); --cf-btn-primary-hover: var(--button-primary-hover, #ff6348); --cf-btn-secondary-bg: var(--primary-color, #4a69bd); --cf-btn-secondary-hover: var(--primary-color-light, #6c8cd5); --cf-btn-accent-bg: var(--tertiary-color, #27ae60); /* Scrollbar */ --cf-scrollbar-thumb: rgba(0, 0, 0, 0.15); --cf-scrollbar-track: rgba(0, 0, 0, 0.04); /* Card system */ --cf-card-bg: var(--card-bg, #ffffff); --cf-card-border: 1px solid var(--cf-border); --cf-card-shadow: var(--cf-shadow); } /* Dark mode — triggered by site's .dark class on */ .dark .campaign-forge-container { --cf-bg-primary: var(--background-dark, #2c3e50); --cf-bg-secondary: var(--card-bg-dark, #34495e); --cf-bg-panel: var(--section-dark-end, #0f172a); --cf-bg-input: rgba(255, 255, 255, 0.06); --cf-bg-hover: rgba(74, 105, 189, 0.15); --cf-bg-active: rgba(74, 105, 189, 0.25); --cf-text: var(--text-light, #ecf0f1); --cf-text-muted: #a0aec0; --cf-text-heading: var(--primary-color-light, #6c8cd5); --cf-border: var(--border-color-dark, rgba(255, 255, 255, 0.15)); --cf-border-strong: rgba(255, 255, 255, 0.2); --cf-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --cf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4); --cf-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5); --cf-scrollbar-thumb: rgba(255, 255, 255, 0.15); --cf-scrollbar-track: rgba(0, 0, 0, 0.1); --cf-card-bg: var(--card-bg-dark, #34495e); --cf-card-border: 1px solid var(--cf-border); --cf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* ── Layout — Main Container ──────────────────────────── */ .campaign-forge-container { background: var(--cf-bg-primary); color: var(--cf-text); font-family: 'Poppins', sans-serif; position: relative; display: flex; flex-direction: column; /* padding-top set dynamically by JS to clear the fixed site header */ } /* Box sizing for all CF elements */ .campaign-forge-container, .campaign-forge-container *, .campaign-forge-container *::before, .campaign-forge-container *::after { box-sizing: border-box; } /* ── Button Hover Isolation ───────────────────────────── */ /* Neutralize main_style.css .btn hover effects inside Campaign Forge (same approach as Monster Creator) */ .campaign-forge-container .btn::before { display: none !important; } .campaign-forge-container .btn:hover { text-shadow: none; } /* ── Loading State ────────────────────────────────────── */ .cf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--cf-header-height)); gap: 1.5rem; } .cf-loading-spinner { font-size: 2.5rem; color: var(--cf-accent); } .cf-loading-text { font-family: 'MedievalSharp', cursive; font-size: 1.2rem; color: var(--cf-text-muted); } /* ── Campaign Selector ────────────────────────────────── */ .cf-campaign-selector { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; } .cf-selector-header { text-align: center; margin-bottom: 2.5rem; } .cf-title { font-family: 'MedievalSharp', cursive; font-size: 2.5rem; color: var(--cf-text-heading); margin-bottom: 0.5rem; } .cf-title i { margin-right: 0.5rem; opacity: 0.8; } .cf-subtitle { font-size: 1.1rem; color: var(--cf-text-muted); } .cf-selector-actions { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; } /* Campaign list cards */ .cf-campaign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; } .cf-campaign-card { background: var(--cf-card-bg); border: var(--cf-card-border); border-radius: var(--cf-radius-lg); padding: 1.5rem; cursor: pointer; transition: all var(--cf-transition); position: relative; overflow: hidden; } .cf-campaign-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent-light)); opacity: 0; transition: opacity var(--cf-transition); } .cf-campaign-card:hover { border-color: var(--cf-accent); box-shadow: var(--cf-shadow-lg); transform: translateY(-2px); } .cf-campaign-card:hover::before { opacity: 1; } .cf-campaign-card:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-campaign-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .cf-campaign-card-name { font-family: 'MedievalSharp', cursive; font-size: 1.3rem; color: var(--cf-text-heading); margin: 0; line-height: 1.3; } .cf-campaign-card-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .cf-campaign-card-status[data-status="active"] { background: rgba(40, 167, 69, 0.15); color: var(--cf-success); } .cf-campaign-card-status[data-status="planning"] { background: rgba(59, 130, 246, 0.15); color: var(--cf-info); } .cf-campaign-card-status[data-status="paused"] { background: rgba(245, 158, 11, 0.15); color: var(--cf-warning); } .cf-campaign-card-status[data-status="completed"] { background: rgba(74, 105, 189, 0.15); color: var(--cf-accent); } .cf-campaign-card-setting { font-size: 0.85rem; color: var(--cf-text-muted); margin-bottom: 0.75rem; } .cf-campaign-card-stats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--cf-text-muted); } .cf-campaign-card-stat { display: flex; align-items: center; gap: 0.3rem; } .cf-campaign-card-stat i { color: var(--cf-accent); font-size: 0.7rem; } .cf-campaign-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--cf-border); font-size: 0.75rem; color: var(--cf-text-muted); } .cf-campaign-card-actions { display: flex; gap: 0.5rem; } .cf-campaign-card-actions button { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--cf-radius-sm); transition: color var(--cf-transition), background var(--cf-transition); min-width: var(--cf-touch-target); min-height: var(--cf-touch-target); display: inline-flex; align-items: center; justify-content: center; } .cf-campaign-card-actions button:hover { color: var(--cf-accent); background: var(--cf-bg-hover); } .cf-campaign-card-actions button.cf-delete-btn:hover { color: var(--cf-danger); background: rgba(231, 76, 60, 0.1); } /* Empty state */ .cf-empty-state { text-align: center; padding: 4rem 2rem; } .cf-empty-icon { font-size: 4rem; color: var(--cf-accent); opacity: 0.4; margin-bottom: 1.5rem; } .cf-empty-state h2 { font-family: 'MedievalSharp', cursive; color: var(--cf-text-heading); margin-bottom: 0.5rem; } .cf-empty-state p { color: var(--cf-text-muted); } /* ── Workspace Layout ─────────────────────────────────── */ .cf-workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .cf-workspace-header { display: flex; align-items: center; padding: 0.4rem 0.75rem; background: var(--cf-bg-secondary); border-bottom: 1px solid var(--cf-border); z-index: 10; gap: 0.5rem; flex-shrink: 0; /* Override main_style.css "header { position: fixed; top: 0 }" */ position: relative !important; top: auto !important; width: auto !important; left: auto !important; } .cf-header-center { display: flex; align-items: center; margin: 0 auto; } .cf-header-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-shrink: 1; } .cf-hide-mobile { /* hidden via media query on small screens */ } .cf-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .cf-campaign-name { font-family: 'MedievalSharp', cursive; font-size: 1.1rem; color: var(--cf-text-heading); margin: 0; padding: 0.1rem 0.4rem; border-radius: var(--cf-radius-sm); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; transition: border-color var(--cf-transition), background var(--cf-transition); } .cf-campaign-name:hover { border-color: var(--cf-border); background: var(--cf-bg-input); } .cf-campaign-name:focus { border-color: var(--cf-accent); background: var(--cf-bg-input); } .cf-save-indicator { font-size: 0.75rem; color: var(--cf-success); display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; transition: opacity var(--cf-transition); } .cf-save-indicator[data-status="saving"] { color: var(--cf-warning); } .cf-save-indicator[data-status="error"] { color: var(--cf-danger); } .cf-save-indicator[data-status="offline"] { color: var(--cf-text-muted); } /* ── View Tabs (inside header) ────────────────────────── */ .cf-view-tabs { display: flex; gap: 0.2rem; } .cf-view-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid transparent; border-radius: var(--cf-radius-sm); background: none; color: var(--cf-text-muted); font-size: 0.82rem; font-family: inherit; cursor: pointer; transition: all var(--cf-transition); white-space: nowrap; } .cf-view-tab:hover { background: var(--cf-bg-hover); color: var(--cf-text); } .cf-view-tab.active { background: var(--cf-bg-active); color: var(--cf-accent); border-color: var(--cf-accent); font-weight: 600; } .cf-view-tab i { font-size: 0.85rem; } .cf-timeline-toggle { color: var(--cf-text-muted); } .cf-timeline-toggle:hover { color: var(--cf-accent); } /* ── Main Layout (sidebar + content) ──────────────────── */ .cf-main { display: grid; grid-template-columns: var(--cf-sidebar-width) 1fr; flex: 1; min-height: 0; overflow: hidden; position: relative; } /* ── Sidebar ──────────────────────────────────────────── */ .cf-sidebar { background: var(--cf-bg-secondary); border-right: 1px solid var(--cf-border); display: flex; flex-direction: column; overflow: hidden; transition: width var(--cf-transition); } .cf-sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--cf-border); flex-shrink: 0; } .cf-search-wrapper { position: relative; display: flex; align-items: center; } .cf-search-icon { position: absolute; left: 0.75rem; color: var(--cf-text-muted); font-size: 0.8rem; pointer-events: none; } .cf-search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); background: var(--cf-bg-input); color: var(--cf-text); font-size: 0.85rem; font-family: inherit; transition: border-color var(--cf-transition), background var(--cf-transition); } .cf-search-input::placeholder { color: var(--cf-text-muted); } .cf-search-input:focus { outline: none; border-color: var(--cf-accent); background: var(--cf-bg-secondary); } .cf-sidebar-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; scrollbar-width: thin; scrollbar-color: var(--cf-scrollbar-thumb) var(--cf-scrollbar-track); } .cf-sidebar-nav::-webkit-scrollbar { width: 6px; } .cf-sidebar-nav::-webkit-scrollbar-track { background: var(--cf-scrollbar-track); } .cf-sidebar-nav::-webkit-scrollbar-thumb { background: var(--cf-scrollbar-thumb); border-radius: 3px; } /* Sidebar entity sections */ .cf-sidebar-section { margin-bottom: 0.25rem; } .cf-sidebar-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; cursor: pointer; transition: background var(--cf-transition); user-select: none; border-radius: 0; } .cf-sidebar-section-header:hover { background: var(--cf-bg-hover); } .cf-sidebar-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cf-text-muted); } .cf-sidebar-section-title i { width: 1rem; text-align: center; color: var(--cf-accent); font-size: 0.75rem; } .cf-sidebar-section-count { font-size: 0.7rem; font-weight: 700; background: var(--cf-bg-active); color: var(--cf-accent); min-width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .cf-sidebar-section-chevron { font-size: 0.6rem; color: var(--cf-text-muted); transition: transform var(--cf-transition); margin-left: 0.5rem; } .cf-sidebar-section.collapsed .cf-sidebar-section-chevron { transform: rotate(-90deg); } .cf-sidebar-section-body { overflow: hidden; transition: max-height 0.25s ease; } .cf-sidebar-section.collapsed .cf-sidebar-section-body { max-height: 0 !important; } /* Sidebar entity items */ .cf-sidebar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 2rem; cursor: pointer; transition: background var(--cf-transition); font-size: 0.85rem; color: var(--cf-text); border: none; background: none; width: 100%; text-align: left; min-height: var(--cf-touch-target); } .cf-sidebar-item:hover { background: var(--cf-bg-hover); } .cf-sidebar-item.active { background: var(--cf-bg-active); color: var(--cf-accent); font-weight: 500; } .cf-sidebar-item:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -2px; border-radius: var(--cf-radius-sm); } .cf-sidebar-item-icon { width: 0.75rem; text-align: center; font-size: 0.7rem; flex-shrink: 0; } .cf-sidebar-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .cf-sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--cf-border); flex-shrink: 0; } /* ── Content Panel ────────────────────────────────────── */ .cf-content { padding: 1.5rem; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--cf-scrollbar-thumb) var(--cf-scrollbar-track); } .cf-content::-webkit-scrollbar { width: 6px; } .cf-content::-webkit-scrollbar-track { background: var(--cf-scrollbar-track); } .cf-content::-webkit-scrollbar-thumb { background: var(--cf-scrollbar-thumb); border-radius: 3px; } /* Welcome/empty content state */ .cf-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 50vh; gap: 1rem; } .cf-welcome-icon { font-size: 3.5rem; color: var(--cf-accent); opacity: 0.3; } .cf-welcome h2 { font-family: 'MedievalSharp', cursive; color: var(--cf-text-heading); margin: 0; } .cf-welcome p { color: var(--cf-text-muted); max-width: 400px; } .cf-quick-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; } /* ── Buttons ──────────────────────────────────────────── */ .cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: var(--cf-radius-sm); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--cf-transition); border: none; text-decoration: none; white-space: nowrap; min-height: var(--cf-touch-target); letter-spacing: 0.02em; } .cf-btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-btn:active { transform: scale(0.97); } .cf-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Primary — site red/orange CTA */ .cf-btn-primary { background: var(--cf-btn-primary-bg); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .cf-btn-primary:hover { background: var(--cf-btn-primary-hover); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Secondary — site blue */ .cf-btn-secondary { background: var(--cf-btn-secondary-bg); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .cf-btn-secondary:hover { background: var(--cf-btn-secondary-hover); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Accent — green */ .cf-btn-accent { background: var(--cf-btn-accent-bg); color: #fff; } .cf-btn-accent:hover { filter: brightness(1.1); } /* Ghost — transparent with border */ .cf-btn-ghost { background: transparent; color: var(--cf-text); border: 1px solid var(--cf-border); } .cf-btn-ghost:hover { background: var(--cf-bg-hover); border-color: var(--cf-accent); color: var(--cf-accent); } /* Small variant */ .cf-btn-small { padding: 0.4rem 0.9rem; font-size: 0.8rem; min-height: 36px; } /* Icon button — round, no text */ .cf-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--cf-touch-target); height: var(--cf-touch-target); border-radius: var(--cf-radius-sm); background: none; border: none; color: var(--cf-text-muted); cursor: pointer; transition: all var(--cf-transition); font-size: 1rem; flex-shrink: 0; } .cf-btn-icon:hover { color: var(--cf-accent); background: var(--cf-bg-hover); } .cf-btn-icon:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } /* ── Forms ────────────────────────────────────────────── */ .cf-form { display: flex; flex-direction: column; gap: 1rem; } .cf-form-group { display: flex; flex-direction: column; gap: 0.35rem; } .cf-form-row { display: flex; gap: 1rem; } .cf-form-half { flex: 1; min-width: 0; } .cf-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cf-text-muted); } .cf-required { color: var(--cf-danger); } .cf-input, .cf-select, .cf-textarea { padding: 0.6rem 0.75rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); background: var(--cf-bg-input); color: var(--cf-text); font-size: 0.9rem; font-family: inherit; transition: border-color var(--cf-transition), background var(--cf-transition), box-shadow var(--cf-transition); min-height: var(--cf-touch-target); } .cf-input::placeholder, .cf-textarea::placeholder { color: var(--cf-text-muted); } .cf-input:focus, .cf-select:focus, .cf-textarea:focus { outline: none; border-color: var(--cf-accent); background: var(--cf-bg-secondary); box-shadow: 0 0 0 3px rgba(var(--cf-accent-rgb), 0.15); } .cf-textarea { resize: vertical; min-height: 80px; width: 100%; box-sizing: border-box; } .cf-input, .cf-select { width: 100%; box-sizing: border-box; } .cf-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237f8c8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } .cf-form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 0.5rem; } /* ── Modals ───────────────────────────────────────────── */ .cf-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 1rem; } .cf-modal-overlay.active { display: flex; } .cf-modal { background: var(--cf-bg-secondary); border: 2px solid var(--cf-accent); border-radius: var(--cf-radius-lg); width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; box-shadow: var(--cf-shadow-xl); animation: cf-modal-slide-in 0.25s ease-out; } .cf-modal-narrow { max-width: 420px; } @keyframes cf-modal-slide-in { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .cf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cf-border); } .cf-modal-header h2 { font-family: 'MedievalSharp', cursive; font-size: 1.25rem; margin: 0; color: var(--cf-text-heading); display: flex; align-items: center; gap: 0.5rem; } .cf-modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--cf-text-muted); min-width: var(--cf-touch-target); min-height: var(--cf-touch-target); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cf-radius-sm); transition: background var(--cf-transition), color var(--cf-transition); } .cf-modal-close:hover { background: var(--cf-bg-hover); color: var(--cf-text); } .cf-modal-close:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-modal-body { padding: 1.25rem; } /* ── Entity Type Grid (quick add) ─────────────────────── */ .cf-entity-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; } .cf-entity-type-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.5rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); background: var(--cf-bg-input); color: var(--cf-text); cursor: pointer; transition: all var(--cf-transition); min-height: var(--cf-touch-target); font-family: inherit; } .cf-entity-type-btn:hover { border-color: var(--cf-accent); background: var(--cf-bg-hover); transform: translateY(-2px); box-shadow: var(--cf-shadow); } .cf-entity-type-btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-entity-type-btn i { font-size: 1.5rem; color: var(--cf-accent); } .cf-entity-type-btn span { font-size: 0.78rem; font-weight: 600; } /* ── Entity Panel (detail/edit view) ──────────────────── */ .cf-entity-panel { max-width: var(--cf-panel-max-width); margin: 0 auto; width: 100%; box-sizing: border-box; } .cf-entity-panel-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cf-border); } .cf-entity-panel-icon { width: 48px; height: 48px; border-radius: var(--cf-radius); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .cf-entity-panel-title { font-family: 'MedievalSharp', cursive; font-size: 1.5rem; color: var(--cf-text-heading); margin: 0; flex: 1; min-width: 0; } .cf-entity-panel-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } /* Entity panel title input */ .cf-entity-panel-title-input { font-family: 'MedievalSharp', cursive; font-size: 1.5rem; color: var(--cf-text-heading); border: none; background: none; outline: none; flex: 1; min-width: 0; padding: 0.2rem 0.4rem; border-radius: var(--cf-radius-sm); transition: background var(--cf-transition), border-color var(--cf-transition); } .cf-entity-panel-title-input:hover { background: var(--cf-bg-input); } .cf-entity-panel-title-input:focus { background: var(--cf-bg-input); border-bottom: 2px solid var(--cf-accent); } /* Fields grid — 2-column layout for compact fields, full-width for textareas */ .cf-fields-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .cf-field-row { display: flex; flex-direction: column; gap: 0.3rem; } /* Textareas span full width */ .cf-field-row:has(textarea) { grid-column: 1 / -1; } /* Boolean fields — inline checkbox */ .cf-field-boolean { flex-direction: row; align-items: center; } .cf-toggle-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; } /* Textarea tall variant (for markdown fields) */ .cf-textarea-tall { min-height: 140px; } /* Entity reference chips */ .cf-entity-ref-wrapper { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .cf-entity-ref-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; background: var(--cf-bg-active); color: var(--cf-accent); border-radius: 10px; font-size: 0.78rem; font-weight: 500; transition: background var(--cf-transition); } .cf-entity-ref-chip:hover { background: rgba(var(--cf-accent-rgb), 0.2); } .cf-entity-ref-name { cursor: pointer; } .cf-entity-ref-name:hover { text-decoration: underline; } .cf-entity-ref-remove { cursor: pointer; font-size: 0.65rem; opacity: 0.7; transition: opacity 0.15s; margin-left: 0.1rem; } .cf-entity-ref-remove:hover { opacity: 1; } /* Responsive: single column fields on mobile */ @media screen and (max-width: 768px) { .cf-fields-grid { grid-template-columns: 1fr; } } /* Entity panel sections */ .cf-panel-section { background: var(--cf-card-bg); border: var(--cf-card-border); border-radius: var(--cf-radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--cf-card-shadow); } .cf-panel-section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.85rem; font-weight: 600; color: var(--cf-text-heading); } .cf-panel-section-header i { font-size: 0.8rem; } /* Connections list */ .cf-connection-list { display: flex; flex-direction: column; gap: 0.5rem; } .cf-connection-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--cf-radius-sm); background: var(--cf-bg-input); font-size: 0.85rem; transition: background var(--cf-transition); } .cf-connection-item:hover { background: var(--cf-bg-hover); } .cf-connection-arrow { color: var(--cf-accent); font-size: 0.75rem; } .cf-connection-name { flex: 1; cursor: pointer; color: var(--cf-accent); } .cf-connection-name:hover { text-decoration: underline; } .cf-connection-type { font-size: 0.7rem; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* Linked assets display */ .cf-asset-list { display: flex; flex-wrap: wrap; gap: 0.75rem; } .cf-asset-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); background: var(--cf-bg-input); font-size: 0.82rem; transition: all var(--cf-transition); max-width: 250px; } .cf-asset-card:hover { border-color: var(--cf-accent); box-shadow: var(--cf-shadow); } .cf-asset-card-remove { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; padding: 0.2rem; font-size: 0.75rem; transition: color var(--cf-transition); min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; } .cf-asset-card-remove:hover { color: var(--cf-danger); } .cf-asset-linker-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } /* ── Browser Modal (monster/map browsers) ────────────── */ .cf-browser-tabs { display: flex; border-bottom: 1px solid var(--cf-border); } .cf-browser-tab { flex: 1; padding: 0.65rem 0.75rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--cf-text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: color var(--cf-transition), border-color var(--cf-transition); } .cf-browser-tab:hover { color: var(--cf-text); background: var(--cf-bg-hover); } .cf-browser-tab.active { color: var(--cf-accent); border-bottom-color: var(--cf-accent); } .cf-browser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; padding: 0 1rem 1rem; max-height: 45vh; overflow-y: auto; } .cf-browser-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; background: var(--cf-bg-input); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); cursor: pointer; text-align: left; transition: border-color var(--cf-transition), box-shadow var(--cf-transition); color: var(--cf-text); font-family: inherit; font-size: inherit; } .cf-browser-card:hover { border-color: var(--cf-accent); box-shadow: var(--cf-shadow); } .cf-browser-card:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-browser-card-icon { font-size: 1.1rem; color: var(--cf-accent); } .cf-browser-card-name { font-weight: 600; font-size: 0.9rem; } .cf-browser-card-meta { font-size: 0.75rem; color: var(--cf-text-muted); } /* Tags input */ .cf-tags-wrapper { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); background: var(--cf-bg-input); min-height: var(--cf-touch-target); cursor: text; transition: border-color var(--cf-transition); } .cf-tags-wrapper:focus-within { border-color: var(--cf-accent); background: var(--cf-bg-secondary); } .cf-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; background: var(--cf-bg-active); color: var(--cf-accent); border-radius: 10px; font-size: 0.78rem; font-weight: 500; } .cf-tag-remove { cursor: pointer; font-size: 0.65rem; opacity: 0.7; transition: opacity 0.15s; } .cf-tag-remove:hover { opacity: 1; } .cf-tag-input { border: none; background: none; outline: none; font-size: 0.85rem; font-family: inherit; color: var(--cf-text); flex: 1; min-width: 80px; padding: 0.15rem 0.25rem; } /* ── Codex Quick Action Button ────────────────────────── */ .cf-codex-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--codex-border, #5a4a2a); border-radius: var(--cf-radius-sm); background: var(--codex-bg-light, #2d2010); color: var(--codex-text, #e8dcc8); cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 500; transition: all var(--cf-transition); } .cf-codex-action:hover { border-color: var(--codex-primary-light, #C4A234); box-shadow: 0 0 10px rgba(196, 162, 52, 0.2); } .cf-codex-action i { color: var(--codex-primary-light, #C4A234); } /* ── Dashboard View ───────────────────────────────────── */ .cf-dashboard { max-width: 1000px; margin: 0 auto; } .cf-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .cf-dashboard-title { font-family: 'MedievalSharp', cursive; color: var(--cf-text-heading); margin: 0; font-size: 1.5rem; } .cf-dashboard-stats { display: flex; gap: 1rem; align-items: center; } .cf-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .cf-dashboard-card { background: var(--cf-card-bg); border: var(--cf-card-border); border-radius: var(--cf-radius); padding: 1rem; cursor: pointer; transition: all var(--cf-transition); display: flex; flex-direction: column; gap: 0.75rem; } .cf-dashboard-card:hover { border-color: var(--cf-accent); box-shadow: var(--cf-shadow-lg); transform: translateY(-2px); } .cf-dashboard-card:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-dashboard-card-header { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.5rem; } .cf-dashboard-card-name { font-weight: 600; font-size: 0.9rem; flex: 1; } .cf-dashboard-card-count { font-size: 1.2rem; font-weight: 700; color: var(--cf-accent); } .cf-dashboard-card-body { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .cf-dashboard-card-item { font-size: 0.82rem; color: var(--cf-text-muted); padding: 0.2rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-dashboard-add { align-self: flex-start; } /* ── List View (dashboard drill-down) ─────────────────── */ .cf-list-view { max-width: 800px; margin: 0 auto; } .cf-list-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .cf-list-items { display: flex; flex-direction: column; gap: 0.5rem; } .cf-list-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--cf-card-bg); border: var(--cf-card-border); border-radius: var(--cf-radius-sm); cursor: pointer; transition: all var(--cf-transition); } .cf-list-item:hover { border-color: var(--cf-accent); background: var(--cf-bg-hover); } .cf-list-item:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; } .cf-list-item-name { flex: 1; font-weight: 500; } /* ── Tabs View ────────────────────────────────────────── */ .cf-tabs-container { display: flex; flex-direction: column; height: 100%; } .cf-tab-bar { display: flex; align-items: center; background: var(--cf-bg-panel); border-bottom: 1px solid var(--cf-border); padding: 0 0.5rem; min-height: 40px; overflow-x: auto; scrollbar-width: none; gap: 0; } .cf-tab-bar::-webkit-scrollbar { display: none; } .cf-tab-list { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; } .cf-tab { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--cf-text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; max-width: 180px; min-width: 0; } .cf-tab:hover { color: var(--cf-text); background: var(--cf-bg-hover); } .cf-tab-active { color: var(--cf-accent); border-bottom-color: var(--cf-accent); font-weight: 500; } .cf-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf-tab-close { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; font-size: 0.65rem; padding: 0.15rem; border-radius: 3px; opacity: 0; transition: opacity 0.15s, background 0.15s; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; } .cf-tab:hover .cf-tab-close { opacity: 1; } .cf-tab-close:hover { background: var(--cf-bg-active); color: var(--cf-danger); } .cf-tab-add { flex-shrink: 0; margin-left: 0.25rem; } .cf-tab-content { flex: 1; overflow-y: auto; padding: 1.5rem; } /* ── Timeline View (integrated) ───────────────────────── */ .cf-timeline-container { width: 100%; overflow-x: auto; position: relative; min-height: 200px; padding: 1rem 0; } .cf-timeline-axis { display: flex; align-items: flex-start; position: relative; min-width: 100%; padding: 2rem 1rem; } .cf-timeline-track { position: relative; height: 4px; background: var(--cf-border); width: 100%; border-radius: 2px; margin-top: 1.5rem; } .cf-timeline-event-card { position: absolute; background: var(--cf-card-bg); border: var(--cf-card-border); border-radius: var(--cf-radius-sm); padding: 0.5rem 0.75rem; font-size: 0.8rem; cursor: pointer; transform: translateX(-50%); transition: all var(--cf-transition); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-timeline-event-card:hover { border-color: var(--cf-accent); box-shadow: var(--cf-shadow); z-index: 5; } .cf-timeline-event-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); top: 50%; cursor: pointer; transition: all var(--cf-transition); border: 2px solid var(--cf-bg-secondary); } .cf-timeline-event-dot:hover { transform: translate(-50%, -50%) scale(1.5); } .cf-timeline-now-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cf-danger); z-index: 3; } .cf-timeline-zoom-controls { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; align-items: center; } /* ── Codex Overrides for Campaign Forge ───────────────── */ /* Codex keeps its default grimoire theme (dark brown/gold). We only override layout behavior, not colors. */ /* On Campaign Forge, Codex push mode should NOT shrink the body or header. Only the CF workspace content area should shrink. */ @media (min-width: 769px) { /* Override codex.css body shrink — keep body full width on CF */ body.codex-push-active:has(.campaign-forge-container) { width: 100vw !important; max-width: 100vw !important; } /* The site header must NEVER shrink — stays full viewport width */ body.codex-push-active:has(.campaign-forge-container) > #header-placeholder, body.codex-push-active:has(.campaign-forge-container) > #header-placeholder > header { width: 100vw !important; max-width: 100vw !important; } /* Only the CF workspace shrinks to make room for Codex panel */ body.codex-push-active:has(.campaign-forge-container) .cf-workspace { width: calc(100% - var(--codex-panel-width, 380px)) !important; transition: width var(--cf-transition); } } /* On tablet, Codex panel is narrower */ @media (min-width: 769px) and (max-width: 1024px) { body.codex-push-active:has(.campaign-forge-container) .cf-workspace { width: calc(100% - 320px) !important; } } /* On mobile, Codex is full-screen overlay — no workspace adjustment */ @media (max-width: 768px) { body.codex-push-active:has(.campaign-forge-container) .cf-workspace { width: 100% !important; } } /* Codex action button in entity panels — grimoire style */ .cf-codex-entity-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px dashed var(--codex-primary, #8B6914); border-radius: var(--cf-radius); background: rgba(139, 105, 20, 0.08); color: var(--codex-primary-light, #C4A234); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: all var(--cf-transition); } .cf-codex-entity-action:hover { background: rgba(139, 105, 20, 0.2); border-style: solid; } /* ── Timeline Slide-Up Panel ─────────────────────────── */ .cf-timeline-panel { position: fixed; left: 0; right: 0; bottom: 0; height: 300px; max-height: 40vh; background: var(--cf-bg-secondary); border-top: 2px solid var(--cf-accent); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15); z-index: 150; display: flex; flex-direction: column; transform: translateY(100%); transition: transform var(--cf-transition); } .cf-timeline-panel.open { transform: translateY(0); display: flex; } .cf-timeline-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid var(--cf-border); flex-shrink: 0; } .cf-timeline-panel-header h3 { margin: 0; font-size: 0.95rem; font-family: 'MedievalSharp', cursive; color: var(--cf-accent); display: flex; align-items: center; gap: 0.5rem; } .cf-timeline-panel-body { flex: 1; overflow: hidden; position: relative; } /* ── Responsive ───────────────────────────────────────── */ /* Tablet — sidebar collapses to icons */ @media screen and (max-width: 1024px) { .cf-main { grid-template-columns: var(--cf-sidebar-collapsed-width) 1fr; } .cf-sidebar { width: var(--cf-sidebar-collapsed-width); } .cf-sidebar-header, .cf-sidebar-footer, .cf-sidebar-section-body, .cf-sidebar-section-count, .cf-sidebar-section-chevron, .cf-sidebar-section-title span { display: none; } .cf-sidebar-section-header { justify-content: center; padding: 0.6rem; } .cf-sidebar-section-title { gap: 0; } .cf-sidebar-section-title i { font-size: 1rem; width: auto; } /* Expand on hover */ .cf-sidebar:hover { width: var(--cf-sidebar-width); position: absolute; z-index: 40; box-shadow: var(--cf-shadow-lg); height: 100%; } .cf-sidebar:hover .cf-sidebar-header, .cf-sidebar:hover .cf-sidebar-footer, .cf-sidebar:hover .cf-sidebar-section-body, .cf-sidebar:hover .cf-sidebar-section-count, .cf-sidebar:hover .cf-sidebar-section-chevron, .cf-sidebar:hover .cf-sidebar-section-title span { display: flex; } .cf-sidebar:hover .cf-sidebar-section-body { display: block; } .cf-campaign-name { max-width: 250px; } } /* Mobile — sidebar becomes off-canvas */ @media screen and (max-width: 768px) { .cf-main { grid-template-columns: 1fr; } .cf-sidebar { position: fixed; left: 0; top: calc(var(--cf-header-height) + 49px); bottom: 0; width: var(--cf-sidebar-width); z-index: 100; transform: translateX(-100%); transition: transform var(--cf-transition); box-shadow: none; height: auto; } .cf-sidebar.open { transform: translateX(0); box-shadow: var(--cf-shadow-xl); } /* Restore all sidebar elements on mobile when open */ .cf-sidebar .cf-sidebar-header, .cf-sidebar .cf-sidebar-footer, .cf-sidebar .cf-sidebar-section-body, .cf-sidebar .cf-sidebar-section-count, .cf-sidebar .cf-sidebar-section-chevron, .cf-sidebar .cf-sidebar-section-title span { display: flex; } .cf-sidebar .cf-sidebar-section-body { display: block; } .cf-sidebar .cf-sidebar-section-header { justify-content: space-between; padding: 0.5rem 0.75rem; } .cf-sidebar .cf-sidebar-section-title { gap: 0.5rem; } .cf-sidebar .cf-sidebar-section-title i { font-size: 0.75rem; width: 1rem; } /* Mobile sidebar toggle button */ .cf-sidebar-toggle { display: inline-flex !important; } .cf-workspace-header { padding: 0.35rem 0.5rem; flex-wrap: wrap; } .cf-campaign-name { font-size: 0.95rem; max-width: 120px; } .cf-header-center { order: 3; width: 100%; justify-content: center; } .cf-content { padding: 1rem; } /* Hide view tab labels and some button labels on mobile */ .cf-view-tab span, .cf-hide-mobile { display: none; } /* Mobile campaign selector */ .cf-campaign-selector { padding: 2rem 1rem; } .cf-title { font-size: 1.8rem; } .cf-campaign-list { grid-template-columns: 1fr; } /* Mobile modals — full width */ .cf-modal { max-width: 100%; max-height: 90vh; margin: 0.5rem; border-radius: var(--cf-radius); } .cf-form-row { flex-direction: column; gap: 1rem; } .cf-entity-type-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* Small mobile */ @media screen and (max-width: 480px) { .cf-title { font-size: 1.5rem; } .cf-selector-actions { flex-direction: column; align-items: stretch; } .cf-campaign-card { padding: 1rem; } .cf-entity-type-grid { grid-template-columns: repeat(2, 1fr); } .cf-header-right .cf-btn-icon:not(:first-child) { display: none; } } /* ── Sidebar Toggle (mobile only, hidden on desktop) ──── */ .cf-sidebar-toggle { display: none; } /* ── Mobile Sidebar Overlay ───────────────────────────── */ .cf-sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.4); } .cf-sidebar-overlay.active { display: block; } /* ── Utility Classes ──────────────────────────────────── */ .cf-hidden { display: none !important; } .cf-fade-in { animation: cf-fade-in 0.2s ease-out; } @keyframes cf-fade-in { from { opacity: 0; } to { opacity: 1; } } .cf-text-muted { color: var(--cf-text-muted); font-size: 0.85rem; } .cf-divider { height: 1px; background: var(--cf-border); margin: 1rem 0; } /* ── Dark Mode — Additional Overrides ─────────────────── */ .dark .cf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0aec0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .dark .cf-campaign-card-name { color: var(--cf-text-heading); } .dark .cf-entity-panel-icon { opacity: 0.9; } /* ── Settings Section Styles ──────────────────────────── */ .cf-settings-section { border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1rem 1rem 0.75rem; margin-bottom: 1rem; } .cf-settings-section legend { font-family: 'MedievalSharp', cursive; font-size: 1rem; color: var(--cf-text-heading); padding: 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; } /* Navigation mode selector grid */ .cf-nav-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .cf-nav-mode-option { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem 0.75rem; border: 2px solid var(--cf-border); border-radius: var(--cf-radius); background: var(--cf-bg-input); cursor: pointer; transition: all var(--cf-transition); text-align: center; } .cf-nav-mode-option:hover { border-color: var(--cf-accent); background: var(--cf-bg-hover); } .cf-nav-mode-option.active { border-color: var(--cf-accent); background: rgba(var(--cf-accent-rgb), 0.1); box-shadow: 0 0 0 1px var(--cf-accent); } .cf-nav-mode-option i { font-size: 1.5rem; color: var(--cf-accent); } .cf-nav-mode-option strong { font-size: 0.85rem; } @media screen and (max-width: 480px) { .cf-nav-mode-grid { grid-template-columns: 1fr; } } /* ── Print Styles ─────────────────────────────────────── */ @media print { .cf-sidebar, .cf-workspace-header, .cf-sidebar-toggle, .cf-btn, .cf-codex-action { display: none !important; } .cf-main { grid-template-columns: 1fr; } .cf-content { height: auto; overflow: visible; } }