/* Styles for the daily panel, share dialog and beat landing. Prefix .cp- only. */
.cp-daily, .cp-beat { display: grid; gap: 16px; max-width: 720px; padding: 20px 16px; color: var(--text); }
.cp-kicker { font: 600 12px/1 var(--font-body, Inter, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cp-title { margin: 0; font: 700 clamp(22px, 4vw, 32px)/1.2 var(--font-display, Sora, Inter, system-ui, sans-serif); color: var(--text); overflow-wrap: anywhere; }
.cp-sub, .cp-muted { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.cp-facts { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cp-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md, 14px); background: var(--surface); border: 1px solid var(--border); color: var(--accent); }
.cp-stat-v { font: 700 20px/1.1 var(--font-display, Sora, Inter, system-ui, sans-serif); color: var(--text); }
.cp-stat-l { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.cp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-actions .hp-btn { display: inline-flex; align-items: center; gap: 8px; }
.cp-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.cp-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.cp-strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 64px; align-items: end; }
.cp-day { position: relative; display: flex; align-items: flex-end; height: 100%; border-radius: 4px; background: var(--accent-soft); outline-offset: 2px; text-decoration: none; }
.cp-day-bar { display: block; width: 100%; min-height: 3px; border-radius: 4px; background: var(--edge-idle); }
.cp-day--played .cp-day-bar { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.cp-day--played::after { content: ""; position: absolute; top: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--surface-solid); }
.cp-day--current { box-shadow: 0 0 0 2px var(--accent); }
.cp-day:focus-visible { outline: 2px solid var(--accent); }

.cp-backdrop { position: fixed; inset: 0; z-index: var(--z-modal, 40); display: grid; place-items: center; padding: 16px; background: rgba(8, 12, 22, 0.5); backdrop-filter: blur(6px); }
.cp-dialog { position: relative; display: grid; gap: 12px; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 16px; border-radius: var(--r-xl, 20px); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-lg, 0 24px 60px rgba(8,12,22,0.35)); }
.cp-close { position: absolute; top: 10px; right: 10px; }
.cp-preview { aspect-ratio: 1200 / 630; border-radius: var(--r-md, 14px); background: var(--bg-2); overflow: hidden; border: 1px solid var(--border); }
.cp-preview-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-field { display: grid; gap: 6px; }
.cp-field-l { font-size: 12px; color: var(--text-3); }
.cp-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cp-link { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; text-overflow: ellipsis; }
.cp-linkrow .hp-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

@media (max-width: 480px) {
  .cp-linkrow { grid-template-columns: minmax(0, 1fr); }
  .cp-actions .hp-btn { flex: 1 1 100%; justify-content: center; }
}