/**
 * Debt Clock styles - shared by /debt-clock and /debt-clock/full
 * Extracted from fallback pages (pages/debt-clock.php, pages/debt-clock-full.php)
 */

/* Common */
.debt-hint { text-align: center; color: var(--text-muted, #888); font-size: var(--text-sm, 0.875rem); margin-bottom: var(--space-4, 16px); }
.debt-clock-actions { display: flex; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); flex-wrap: wrap; justify-content: center; }
body.debt-immersive-open { overflow: hidden; }

/* Debt-clock pages use standard article width, iframe scrolls within container */

/* Resource grid (debt-clock main) */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }
.resource-card { background: var(--bg-tertiary, #1a1a2e); border: 1px solid var(--border-subtle, #333); border-radius: 10px; padding: var(--space-4, 16px); text-decoration: none; display: flex; flex-direction: column; gap: var(--space-2, 8px); transition: border-color 0.2s, transform 0.2s; }
.resource-card:hover { border-color: var(--accent-primary, #0ea5e9); transform: translateY(-2px);   background: rgba(14, 165, 233, 0.06);
}
.resource-title { color: var(--text-primary, #e5e5e7); font-weight: 600; }
.resource-desc { color: var(--text-muted, #888); font-size: var(--text-sm, 0.875rem); }

/* Standard view (/debt-clock) */
.debt-clock-section { max-width: 1600px; margin: var(--space-4, 16px) auto; padding: 0 var(--space-4, 16px); }
.debt-clock-container { background: var(--bg-elevated, #111); border-radius: 12px; padding: var(--space-4, 16px); border: 1px solid var(--border-subtle, #333); }
.debt-clock-wrapper { width: 100%; overflow: hidden; border-radius: 8px; background: #1a1a1a; position: relative; }
.debt-clock-scaler { transform-origin: top left; }
.debt-clock-iframe { width: 3000px; height: 1400px; border: none; display: block; background: #1a1a1a; }

/* Standard view immersive mode */
.debt-clock-shell.is-immersive { position: fixed; inset: 0; z-index: 10050; padding: var(--space-4, 16px); background: var(--bg-primary, #0a0a0f); overflow: hidden; display: flex; flex-direction: column; }
.debt-clock-shell.is-immersive .debt-clock-section { width: 100%; margin: 0; flex: 1; }
.debt-clock-shell.is-immersive .debt-clock-container { height: 100%; }
.debt-clock-shell.is-immersive .debt-clock-wrapper { height: auto; max-height: none; flex: 1; }

/* Full view (/debt-clock/full) */
.debt-clock-full-controls { display: flex; gap: var(--space-3, 12px); justify-content: center; margin-bottom: var(--space-4, 16px); flex-wrap: wrap; }
.debt-clock-full-section { max-width: 1600px; margin: var(--space-4, 16px) auto; padding: 0 var(--space-4, 16px); }
.debt-clock-full-container { background: var(--bg-elevated, #111); border-radius: 12px; padding: var(--space-4, 16px); border: 1px solid var(--border-subtle, #333); display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.debt-clock-full-wrapper { width: 100%; overflow: hidden; border-radius: 8px; background: #1a1a1a; position: relative; flex: 1 1 auto; min-height: 0; }
.debt-clock-full-scaler { transform-origin: top left; }
.debt-clock-full-iframe { width: 3000px; height: 1400px; border: none; display: block; background: #1a1a1a; }
.debt-clock-full-footer { display: flex; justify-content: center; }
.fullscreen-only { display: none; }

/* Full view immersive mode */
.debt-clock-full-shell.is-immersive { position: fixed; inset: 0; z-index: 10050; padding: var(--space-4, 16px); background: var(--bg-primary, #0a0a0f); overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.debt-clock-full-shell.is-immersive .debt-clock-full-section { width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; }
.debt-clock-full-shell.is-immersive .debt-clock-full-container { height: 100%; padding: var(--space-4, 16px); min-height: 0; }
.debt-clock-full-shell.is-immersive .debt-clock-full-wrapper { height: auto; max-height: none; flex: 1 1 auto; min-height: 0; overflow: auto; }
.debt-clock-full-shell.is-immersive .fullscreen-only { display: block; }

/* Mobile */
@media (max-width: 768px) {
    .debt-clock-actions { flex-direction: column; }
    .debt-clock-actions .btn { width: 100%; text-align: center; }
    .debt-clock-section,
    .debt-clock-full-section { width: 100%; margin-left: 0; margin-right: 0; }
    .debt-clock-wrapper { height: 70vh; }
    .debt-clock-full-wrapper { height: 70vh; }
}