/* Codex: left panel (like the word bank), entry views shared with the codex board card, homebrew form. */
.codex-panel { position: absolute; left: var(--panel-left); top: calc(var(--topbar-h) + 12px); bottom: 16px; z-index: 24; width: 360px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--glass-border-hi); box-shadow: var(--shadow-2), var(--frame); transform: translateX(calc(-100% - var(--dock-w) - 40px)); pointer-events: none; transition: transform var(--dur-mid) var(--ease-out), left var(--dur-mid) var(--ease-out); }
.codex-panel.open { transform: translateX(0); pointer-events: auto; }
.codex-panel .eyebrow { color: var(--brand-2); }
.app:has(.dice-tray.open) .codex-panel.open { left: var(--panel-left-dice); }
.cx-main { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.cx-list { overflow: visible; }
.cx-newbar, .cx-bar, .cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cx-bar { margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.cx-level { width: 56px; padding: 2px 6px; display: inline-block; }
.cx-attrib { margin: 0; padding-top: 8px; border-top: 1px solid var(--gold-soft); font-size: 10.5px; line-height: 1.4; color: var(--ink-2); }

.cx-entry { display: flex; flex-direction: column; gap: 4px; }
.cx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; color: var(--ink-0); }
.cx-badge { flex: none; padding: 2px 8px; border-radius: 999px; font-family: var(--font-label); font-size: 9px; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--glass-border); }
.cx-badge.homebrew { color: var(--brand-2); border-color: var(--gold-soft); }
.cx-sum { margin: 0 0 4px; font-style: italic; font-size: calc(13px * var(--prose-scale)); line-height: 1.4; color: var(--ink-1); }
.cx-section { margin: 12px 0 4px; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-3); }
.cx-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 4px 0; font-size: 12px; }
.cx-stats dt { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.cx-stats dd { margin: 0; color: var(--ink-1); line-height: 1.4; }
.cx-trait { margin: 0 0 6px; font-size: calc(12.5px * var(--prose-scale)); line-height: 1.45; color: var(--ink-1); }
.cx-trait b, .cx-row b { color: var(--ink-0); }
.cx-row { display: grid; grid-template-columns: 42px 1fr; column-gap: 8px; padding: 4px 0; border-top: 1px solid var(--glass-border); font-size: calc(12.5px * var(--prose-scale)); }
.cx-row p { grid-column: 2; margin: 2px 0 0; line-height: 1.4; color: var(--ink-1); }
.cx-lvl { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 1px; }
.cx-more { margin-top: 6px; }
.cx-more summary { cursor: pointer; font-size: 11.5px; color: var(--ink-2); padding: 4px 0; }
.cx-notes-area { min-height: 90px; width: 100%; resize: vertical; background: var(--field-bg, var(--panel-bg-2)); border: 1px solid var(--glass-border); }
.cx-card { font-size: 13px; }

.cx-form { display: flex; flex-direction: column; gap: 8px; }
.cx-form h3 { margin: 0; font-family: var(--font-display); color: var(--ink-0); }
.cx-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-2); }
.cx-field .input, .cx-field .select { width: 100%; }
.cx-saves { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-flist { display: flex; flex-direction: column; gap: 8px; }
.cx-frow { display: grid; grid-template-columns: 52px 1fr 24px; gap: 4px; }
.cx-frow .cx-ftext { grid-column: 1 / -1; }
.cx-frow .cx-fname:first-child { grid-column: 1 / 3; }
.cx-frow .cx-flevel { padding: 5px 6px; }

.cx-sheet { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
.cx-sheetrow { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.cx-k { flex: none; width: 66px; font-family: var(--font-label); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cx-s { flex: 1; min-width: 0; line-height: 1.3; }
.cx-mini { height: 22px; padding: 0 8px; font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
  .codex-panel { transition: none; }
}
@media (max-width: 760px) {
  .codex-panel { width: calc(100vw - 88px); }
  .app:has(.dice-tray.open) .codex-panel.open { left: var(--panel-left); }
}
.cx-attrib summary { cursor: pointer; } .cx-attrib p { margin: 4px 0 0; }
.cx-item b { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-item b .cx-badge { font-family: var(--font-label); font-weight: 400; }
.cx-item b .cx-badge { font-size: 9px; line-height: 1.3; color: var(--ink-2); }
.cx-item b .cx-badge.homebrew { color: var(--brand-2); }