/* ==========================================================================
   THEME: "A Day in the Life of a Data Engineer"
   --------------------------------------------------------------------------
   Loaded after styles.css — re-skins the portfolio as a pipeline run.
   The page reads like a DAG executing through one workday:
   cron fires at 07:00 (hero) and the run deploys at 18:00 (contact).
   Design language: terminal console, SQL comments, task status chips,
   graph-paper grid, monospace identity. No glassmorphism, no gradients.
   Dark = night shift, light = day shift (paper).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
    /* Night shift (default) */
    --bg-primary: #0a0e13;
    --bg-secondary: #0f151d;
    --bg-tertiary: #151d28;
    --text-primary: #e8ebef;
    --text-secondary: #c6ccd4;
    --text-muted: #8b96a3;
    --accent-primary: #f6b31b;
    --accent-secondary: #e09c00;
    --accent-hover: #ffc63d;
    --border-color: rgba(246, 179, 27, 0.16);
    --shadow-color: rgba(0, 0, 0, 0.55);
    --code-bg: #0d1219;

    --de-teal: #35d0ba;
    --de-green: #3ddc84;
    --de-red: #ff5c57;
    --de-grid: rgba(246, 179, 27, 0.035);
    --de-panel-border: rgba(246, 179, 27, 0.16);
    --de-panel-border-hover: rgba(246, 179, 27, 0.45);
    --de-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --de-display: 'Space Grotesk', 'Inter', sans-serif;
}

:root[data-theme="light"] {
    /* Day shift (warm paper) */
    --bg-primary: #f5f2ea;
    --bg-secondary: #fffdf7;
    --bg-tertiary: #ece7db;
    --text-primary: #191c21;
    --text-secondary: #2c313a;
    --text-muted: #5c6570;
    --accent-primary: #b45309;
    --accent-secondary: #92400e;
    --accent-hover: #d97706;
    --border-color: rgba(25, 28, 33, 0.16);
    --shadow-color: rgba(25, 28, 33, 0.12);
    --code-bg: #efeadf;

    --de-teal: #0f766e;
    --de-green: #15803d;
    --de-red: #b91c1c;
    --de-grid: rgba(25, 28, 33, 0.045);
    --de-panel-border: rgba(25, 28, 33, 0.16);
    --de-panel-border-hover: rgba(180, 83, 9, 0.55);
}

/* ---------- 2. Canvas: graph-paper grid ---------------------------------- */

body {
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(var(--de-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--de-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: fixed;
}

/* iOS Safari handles fixed background attachment poorly — let it scroll */
@supports (-webkit-touch-callout: none) {
    body { background-attachment: scroll; }
}

::selection {
    background: var(--accent-primary);
    color: #0a0e13;
}

/* Console scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-primary);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* Retire the generic animated hero background (streams / neural nodes) */
.ai-background { display: none !important; }

.hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(246, 179, 27, 0.06), transparent 60%),
        transparent !important;
}

/* ---------- 3. Navigation: pipeline control bar --------------------------- */

/* The navbar background is solid, so the legacy backdrop blur adds nothing —
   and on iOS Safari a backdrop-filter on the fixed navbar turns it into the
   containing block for the fixed nav drawer inside it, which breaks the
   drawer's position entirely. Remove it in both states. */
.navbar {
    padding: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--de-panel-border);
    box-shadow: none;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar.scrolled {
    background: var(--bg-primary);
    box-shadow: 0 6px 24px var(--shadow-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-container {
    max-width: 1280px;
    min-height: 58px;
    padding: 0 28px;
    gap: 1.25rem;
}

/* Run progress: the thin line at the very top IS the pipeline progress */
.pipeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(246, 179, 27, 0.12);
}

.pipeline-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--de-teal));
    transition: width 0.15s linear;
}

/* Logo: a shell prompt on branch main */
.nav-logo h2 {
    font-family: var(--de-mono);
    font-size: 0.95rem;
    font-weight: 500;
    gap: 0;
}

.nav-logo .code-bracket { color: var(--de-teal); font-weight: 600; }
.nav-logo .name-text { color: var(--text-primary); font-weight: 600; margin: 0 1px; }
.nav-logo .logo-branch {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0 4px 0 6px;
}
.nav-logo:hover .name-text { color: var(--accent-primary); }

.cursor-blink {
    color: var(--accent-primary);
    animation: de-blink 1.1s steps(1) infinite;
    font-weight: 400;
}

@keyframes de-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Nav links: two-line task entries — a language-neutral mono command on top,
   the localized human label beneath. German labels ("Zertifizierungen") no
   longer stretch the bar, because the wide row is always the short command. */
.nav-menu {
    gap: 1.35rem;
    counter-reset: navtask -1;
    align-items: center;
}

.nav-menu > li { counter-increment: navtask; }

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0.3rem 0;
    color: var(--text-muted);
}

/* retire the old underline pseudo-elements entirely */
.nav-link::before,
.nav-link::after,
.nav-link:hover::after {
    display: none;
}

.nav-link:hover { transform: none; }

.nl-cmd {
    display: inline-flex;
    align-items: center;
    font-family: var(--de-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.nl-cmd::before {
    content: counter(navtask, decimal-leading-zero) ' ';
    white-space: pre;
    font-size: 0.82em;
    color: var(--text-muted);
    opacity: 0.6;
    transition: color 0.25s ease, opacity 0.25s ease;
}

/* task status dot */
.nl-cmd::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 0.5em;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--text-muted);
    opacity: 0.55;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.nl-label {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.75;
    white-space: nowrap;
}

.nl-time { display: none; }

.nav-link:hover .nl-cmd { color: var(--text-primary); }
.nav-link:hover .nl-cmd::after { border-color: var(--accent-primary); opacity: 1; }

/* Task states driven by scroll position (see initPipelineRun in script.js) */
.nav-link.is-done .nl-cmd::after {
    background: var(--de-green);
    border-color: var(--de-green);
    opacity: 0.9;
}

.nav-link.active .nl-cmd { color: var(--accent-primary); }
.nav-link.active .nl-cmd::before { color: var(--accent-primary); opacity: 1; }
.nav-link.active .nl-cmd::after {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    opacity: 1;
    animation: de-pulse 1.3s ease-in-out infinite;
}

@keyframes de-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 179, 27, 0.55); }
    60% { box-shadow: 0 0 0 5px rgba(246, 179, 27, 0); }
}

/* Live shift clock */
.nav-clock {
    font-family: var(--de-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    border: 1px solid var(--de-panel-border);
    border-radius: 4px;
    padding: 0.3rem 0.55rem;
}

@media (max-width: 1180px) { .nav-clock { display: none; } }

/* Square the control buttons */
.theme-toggle { border-radius: 6px; border-color: var(--de-panel-border); }
.theme-toggle:hover { transform: none; border-color: var(--accent-primary); }
.lang-btn { border-radius: 6px; font-family: var(--de-mono); font-size: 0.78rem; border-color: var(--de-panel-border); }
.hamburger { border-radius: 6px; background: transparent; border: 1px solid var(--de-panel-border); }
.hamburger span { box-shadow: none; height: 2px; }

/* ---------- 4. Type system ------------------------------------------------ */

h1, h2, h3, .hero-title, .section-title {
    font-family: var(--de-display);
    letter-spacing: -0.015em;
}

.gradient-text {
    color: var(--text-primary);
    font-weight: 700;
}

.highlight { color: var(--accent-primary); font-weight: 600; }
.highlight-accent { color: var(--de-teal); font-weight: 600; }

:root[data-theme="light"] .highlight { color: var(--accent-primary) !important; }
:root[data-theme="light"] .highlight-accent { color: var(--de-teal) !important; }

/* ---------- 5. Section headers: task log lines ---------------------------- */

.section-header {
    text-align: left;
    margin-bottom: 3rem;
    border-left: 2px solid var(--de-panel-border);
    padding-left: 1.5rem;
}

.section-title {
    font-size: 2.4rem;
    display: block;
}

.section-title::before {
    content: '-- ';
    font-family: var(--de-mono);
    color: var(--accent-primary);
    font-weight: 500;
}

.section-title::after { display: none; }

.section-subtitle {
    font-family: var(--de-mono);
    font-size: 0.85rem;
    margin-top: 0.4rem;
    color: var(--text-muted);
}

.section-subtitle::before { content: '/* '; opacity: 0.6; }
.section-subtitle::after { content: ' */'; opacity: 0.6; }

/* The task-meta line: `09:00  whoami --standup  [RUNNING]` */
.task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65em;
    font-family: var(--de-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.task-meta::before {
    content: '●';
    font-size: 0.7em;
    color: var(--text-muted);
    opacity: 0.6;
}

.task-meta .tm-time { color: var(--text-secondary); font-weight: 600; }

.task-meta .tm-id::before { content: '$ '; opacity: 0.55; }
.task-meta .tm-id { color: var(--text-muted); }

.task-meta .tm-status {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    opacity: 0.85;
}

/* queued → running → success as the visitor scrolls through the day */
.task-meta[data-task-status="running"]::before { color: var(--accent-primary); opacity: 1; animation: de-blink 1.1s steps(1) infinite; }
.task-meta[data-task-status="running"] .tm-status {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    opacity: 1;
}

.task-meta[data-task-status="success"]::before { content: '✔'; color: var(--de-green); opacity: 1; }
.task-meta[data-task-status="success"] .tm-status {
    border-color: var(--de-green);
    color: var(--de-green);
    opacity: 1;
}

:root[data-theme="light"] .task-meta[data-task-status="running"] .tm-status { color: var(--accent-primary) !important; }
:root[data-theme="light"] .task-meta[data-task-status="success"] .tm-status { color: var(--de-green) !important; }

/* Hero run banner: `# dag: ghufran_daily · schedule: 0 7 * * MON–FRI` */
.run-meta {
    font-family: var(--de-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    border: 1px solid var(--de-panel-border);
    border-radius: 6px;
    background: var(--bg-secondary);
    display: inline-block;
    padding: 0.5rem 0.9rem;
    margin-bottom: 1.4rem;
}

.run-meta .rm-dim { color: var(--text-muted); }

.run-meta .rm-chip {
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.run-meta .rm-chip::before {
    content: '● ';
    animation: de-blink 1.1s steps(1) infinite;
}

:root[data-theme="light"] .run-meta .rm-chip { color: var(--accent-primary) !important; }

/* ---------- 6. Panels: one card language everywhere ----------------------- */

.story-card,
.tech-stack,
.achievement-item,
.tech-category,
.timeline-content,
.project-card,
.skill-category,
.certification-card,
.education-content,
.connection-node,
.capability-matrix,
.pipeline-stage,
.metric-card,
.tech-detail-card,
.collaboration-stats {
    background: var(--bg-secondary);
    border: 1px solid var(--de-panel-border);
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.story-card:hover,
.achievement-item:hover,
.timeline-content:hover,
.project-card:hover,
.skill-category:hover,
.certification-card:hover,
.education-content:hover,
.connection-node:hover,
.pipeline-stage:hover,
.metric-card:hover,
.tech-detail-card:hover {
    transform: translateY(-3px);
    border-color: var(--de-panel-border-hover);
    box-shadow: 0 10px 28px var(--shadow-color);
}

/* Light mode must out-specify the !important glass rules in styles.css */
:root[data-theme="light"] .timeline-content,
:root[data-theme="light"] .project-card,
:root[data-theme="light"] .story-card,
:root[data-theme="light"] .skill-category,
:root[data-theme="light"] .certification-card,
:root[data-theme="light"] .education-content,
:root[data-theme="light"] .tech-item,
:root[data-theme="light"] .achievement-item,
:root[data-theme="light"] .tech-category,
:root[data-theme="light"] .connection-node,
:root[data-theme="light"] .node-header,
:root[data-theme="light"] .dag-task,
:root[data-theme="light"] .feature-badge {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--de-panel-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Icon tiles: square terminal glyphs instead of glowing circles */
.story-icon,
.stage-icon,
.achievement-icon,
.stat-icon,
.metric-icon,
.node-icon {
    border-radius: 6px !important;
    background: transparent !important;
    border: 1px solid var(--de-panel-border);
    color: var(--accent-primary);
    box-shadow: none !important;
}

.story-icon i, .stage-icon i, .achievement-icon i, .stat-icon i, .metric-icon i, .node-icon i {
    color: var(--accent-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--accent-primary) !important;
}

/* ---------- 7. Hero ------------------------------------------------------- */

/* Square avatar — a warehouse tile, not a round social bubble */
.profile-border {
    border-radius: 12px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--de-panel-border);
    position: relative;
}

/* viewfinder corner brackets around the avatar */
.profile-border::before {
    content: '';
    position: absolute;
    inset: -9px;
    pointer-events: none;
    background:
        linear-gradient(var(--accent-primary), var(--accent-primary)) top left / 22px 2px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) top left / 2px 22px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) top right / 22px 2px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) top right / 2px 22px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) bottom left / 22px 2px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) bottom left / 2px 22px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) bottom right / 22px 2px,
        linear-gradient(var(--accent-primary), var(--accent-primary)) bottom right / 2px 22px;
    background-repeat: no-repeat;
}

.profile-image { border-radius: 12px; }
.scan-overlay { border-radius: 12px; }

.profile-title {
    font-family: var(--de-mono);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}
.profile-title .code-bracket { color: var(--de-teal); }
.profile-title .name-text { color: var(--text-primary); }

.hero-subtitle {
    font-family: var(--de-mono);
    color: var(--accent-primary) !important;
    font-size: 1.05rem;
    min-height: 1.6em;
}

/* Capability matrix + terminals: crisp console panels */
.matrix-header, .terminal-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--de-panel-border);
}

.matrix-title, .terminal-title { font-family: var(--de-mono); }

.ai-terminal {
    border: 1px solid var(--de-panel-border);
    border-radius: 6px;
    box-shadow: none;
    background: var(--code-bg);
}

.terminal-body { background: var(--code-bg); font-family: var(--de-mono); }

.cap-label, .cap-value { font-family: var(--de-mono); }
.cap-bar { border-radius: 2px; }
.cap-fill { border-radius: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--de-teal)); }

/* ---------- 8. Buttons: terminal commands --------------------------------- */

.btn {
    font-family: var(--de-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 4px;
    padding: 12px 22px;
    text-transform: lowercase;
}

.btn::before { display: none; }

.btn-primary {
    background: var(--accent-primary);
    color: #0a0e13 !important;
    border: 1px solid var(--accent-primary);
    box-shadow: none;
    backdrop-filter: none;
}

.btn-primary span::before { content: '▸ '; }

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(246, 179, 27, 0.28);
}

:root[data-theme="light"] .btn-primary {
    background: var(--accent-primary);
    color: #fffdf7 !important;
    border-color: var(--accent-primary);
    box-shadow: none;
}

.btn-secondary,
.btn-accent {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--de-panel-border);
    box-shadow: none;
    backdrop-filter: none;
}

.btn-secondary:hover,
.btn-accent:hover {
    background: var(--bg-tertiary);
    border-color: var(--de-panel-border-hover);
    transform: translateY(-2px);
    box-shadow: none;
}

:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-accent {
    background: transparent;
    border: 1px solid var(--de-panel-border);
    box-shadow: none;
}

.social-btn {
    font-family: var(--de-mono);
    border-radius: 4px;
    text-transform: lowercase;
}

/* ---------- 9. Experience: the extract log -------------------------------- */

.timeline::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--accent-primary) 0 5px,
        transparent 5px 11px
    ) !important;
    opacity: 0.35;
    width: 2px;
}

.timeline-marker {
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--de-panel-border-hover);
    box-shadow: none;
    background: #ffffff;
}

.company-logo { border-radius: 6px; }

.timeline-content { border-radius: 6px; }

.timeline-content h3 { font-family: var(--de-display); }

.timeline-date {
    font-family: var(--de-mono);
    font-size: 0.75rem;
    border: 1px solid var(--de-panel-border);
    border-radius: 3px;
    padding: 0.2rem 0.6rem;
    display: inline-block;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.timeline-date::before { content: 'interval: ['; opacity: 0.6; }
.timeline-date::after { content: ']'; opacity: 0.6; }

.timeline-list li::marker { color: var(--accent-primary); }

/* ---------- 10. Projects: dbt models -------------------------------------- */

.projects-grid { counter-reset: project; }

.project-card {
    counter-increment: project;
    position: relative;
    padding-top: 3.4rem;
    border-radius: 6px;
    overflow: hidden;
}

/* Each project renders as a model file in the repo */
.project-card::before {
    content: 'model_' counter(project, decimal-leading-zero) '.sql';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.55rem 1.5rem;
    font-family: var(--de-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--de-panel-border);
}

/* fake window dots on the model header */
.project-card::after {
    content: '';
    position: absolute;
    top: 0.8rem;
    right: 1.25rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: -14px 0 0 var(--de-teal), -28px 0 0 var(--text-muted);
    opacity: 0.7;
}

.project-header h3 { font-family: var(--de-display); }

.project-status {
    font-family: var(--de-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--de-green);
    color: var(--de-green);
    background: transparent;
    border-radius: 3px;
    padding: 0.2rem 0.5rem;
}

.project-status.internal {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.tech-tag, .tech-item, .skill-item, .highlight-item, .tech-tags span {
    font-family: var(--de-mono);
    font-size: 0.72rem;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--de-panel-border);
    color: var(--text-secondary);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tech-tag:hover, .tech-item:hover, .skill-item:hover, .highlight-item:hover, .tech-tags span:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: transparent;
    transform: none;
    box-shadow: none;
}

.project-link { font-family: var(--de-mono); font-size: 0.82rem; }

/* ---------- 11. Skills / warehouse tables --------------------------------- */

.skill-category h3, .tech-category h4 { font-family: var(--de-display); }

.skill-category h3::before {
    content: '▸ ';
    color: var(--accent-primary);
    font-family: var(--de-mono);
}

/* Radar: unify the leftover blue/purple palette to amber/teal */
.radar-point { fill: var(--accent-primary) !important; }
.label-dot { background: var(--accent-primary) !important; }
.radar-label { font-family: var(--de-mono); font-size: 0.72rem; }
.label-level { color: var(--de-teal); }

/* ---------- 12. Education & certifications: quality checks ---------------- */

.education-timeline::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--accent-primary) 0 5px,
        transparent 5px 11px
    );
    opacity: 0.35;
}

.education-item::before {
    border-radius: 3px;
    background: var(--accent-primary);
}

.achievement-badge {
    font-family: var(--de-mono);
    border-radius: 3px;
    color: #0a0e13;
}

.cert-status {
    font-family: var(--de-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--de-green);
    color: var(--de-green) !important;
    border-radius: 3px;
}

.cert-status::before { content: '✔ '; }

.cert-id { font-family: var(--de-mono); color: var(--text-muted); }
.cert-date { font-style: normal; font-family: var(--de-mono); font-size: 0.75rem; }

/* ---------- 13. Contact: deploy & on-call ---------------------------------- */

.connection-node { border-radius: 6px; }
.node-address { font-family: var(--de-mono); }
.status-text { font-family: var(--de-mono); letter-spacing: 0.08em; }
.node-action { font-family: var(--de-mono); text-transform: lowercase; }

/* ---------- 14. Footer: run complete --------------------------------------- */

.footer {
    border-top: 1px solid var(--de-panel-border);
    background: var(--bg-primary);
}

.footer-exit {
    font-family: var(--de-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.footer-exit .tm-time { color: var(--text-secondary); font-weight: 600; }

.footer-exit .exit-ok { color: var(--de-green); font-weight: 600; }
:root[data-theme="light"] .footer-exit .exit-ok { color: var(--de-green) !important; }

.scroll-top-btn {
    border-radius: 6px;
    font-family: var(--de-mono);
}

/* ---------- 15. Responsive refinements ------------------------------------- */

/* --------------------------------------------------------------------------
   Drawer navigation (phone + tablet, <=1024px): a task run sheet.
   The menu opens as `$ ghufran_daily --list-tasks` — each task is a row with
   command, localized label, scheduled time, and its live status dot; rows
   slide in staggered like log lines being written.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .nav-menu {
        top: 59px;
        height: calc(100vh - 59px);
        /* iOS Safari: 100vh includes the collapsed URL bar; dvh tracks it */
        height: calc(100dvh - 59px);
        background: var(--bg-primary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: center;
        padding-top: 1.1rem;
        z-index: 1001;
    }

    :root[data-theme="light"] .nav-menu {
        background: var(--bg-primary);
    }

    .nav-menu::before {
        content: '$ ghufran_daily --list-tasks';
        display: block;
        width: min(440px, calc(100% - 3rem));
        font-family: var(--de-mono);
        font-size: 0.8rem;
        color: var(--accent-primary);
        padding: 0.75rem 0.25rem 0.9rem;
        border-bottom: 1px dashed var(--de-panel-border);
        margin-bottom: 0.9rem;
    }

    .nav-menu::after {
        content: '── end of task list · exit 0 ──';
        display: block;
        width: min(440px, calc(100% - 3rem));
        text-align: center;
        font-family: var(--de-mono);
        font-size: 0.66rem;
        color: var(--text-muted);
        opacity: 0.6;
        padding-top: 1rem;
        border-top: 1px dashed var(--de-panel-border);
        margin-top: 0.9rem;
    }

    .nav-menu li {
        width: min(440px, calc(100% - 3rem));
        margin: 0.18rem 0;
        opacity: 0;
        transform: translateX(-16px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav-menu.active li { opacity: 1; transform: none; }
    .nav-menu.active li:nth-child(1) { transition-delay: 0.05s; }
    .nav-menu.active li:nth-child(2) { transition-delay: 0.09s; }
    .nav-menu.active li:nth-child(3) { transition-delay: 0.13s; }
    .nav-menu.active li:nth-child(4) { transition-delay: 0.17s; }
    .nav-menu.active li:nth-child(5) { transition-delay: 0.21s; }
    .nav-menu.active li:nth-child(6) { transition-delay: 0.25s; }
    .nav-menu.active li:nth-child(7) { transition-delay: 0.29s; }
    .nav-menu.active li:nth-child(8) { transition-delay: 0.33s; }

    .nav-link,
    .nav-link:hover,
    .nav-link:focus {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
        width: 100%;
        padding: 0.8rem 1rem;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        font-size: 1rem;
    }

    .nav-link:hover,
    .nav-link.active {
        background: var(--bg-secondary);
        border-color: var(--de-panel-border);
    }

    .nl-cmd { font-size: 0.95rem; min-width: 9.5ch; }
    .nl-label { font-size: 0.72rem; flex: 1; text-align: left; }

    .nl-time {
        display: inline;
        font-family: var(--de-mono);
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .section-header {
        padding-left: 1rem;
        margin-bottom: 2.25rem;
    }

    .section-title { font-size: 1.9rem; }

    .task-meta { font-size: 0.7rem; gap: 0.5em; }
    .task-meta .tm-id { word-break: break-word; }

    .run-meta {
        font-size: 0.68rem;
        padding: 0.45rem 0.7rem;
        line-height: 1.7;
    }

    .project-card { padding-top: 3.2rem; }
}

@media (max-width: 400px) {
    .run-meta { font-size: 0.62rem; }
    .task-meta .tm-id { font-size: 0.92em; }
}

/* ---------- 16. Morning pipeline: proper DAG grid --------------------------
   The old layout used flex + absolutely-positioned connector arrows that
   overlapped neighbouring cards and orphaned on wrap. Stages are now a clean
   responsive grid of numbered task files; the sequence reads through the
   stage_NN numbering and the ▸▸ marker in each header strip. */

.pipeline-viz-section .section-header {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3rem;
}

.pipeline-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    counter-reset: stage;
    margin: 0 0 3rem;
}

.pipeline-stage {
    counter-increment: stage;
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 3rem 1.25rem 1.4rem;
    opacity: 1;
    transform: none;
    animation: none;
    align-items: flex-start;
}

.pipeline-stage::before {
    content: 'stage_' counter(stage, decimal-leading-zero) '.py';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 1.25rem;
    font-family: var(--de-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--de-panel-border);
}

/* sequence marker in the strip (every stage except the last) */
.pipeline-stage::after {
    content: '▸▸';
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    font-family: var(--de-mono);
    font-size: 0.7rem;
    color: var(--accent-primary);
    opacity: 0.8;
}

.pipeline-stage:last-child::after {
    content: '■';
    display: block;
    color: var(--de-green);
}

.stage-connector { display: none !important; }

.stage-icon {
    width: 44px;
    height: 44px;
    margin: 0 0 0.9rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.stage-icon i { font-size: 1.15rem; }

.pipeline-stage:hover .stage-icon {
    transform: none;
    box-shadow: none;
}

.stage-content {
    text-align: left;
    padding: 0;
}

.stage-content h3 {
    font-family: var(--de-display);
    font-size: 1.05rem;
}

.tech-tags { justify-content: flex-start; }

.pipeline-metrics {
    gap: 1.25rem;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .pipeline-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pipeline-flow { grid-template-columns: 1fr; gap: 1rem; }
    .pipeline-stage { padding: 3rem 1.1rem 1.25rem; }
}

/* ---------- 17. Live log ticker: tail -f career.log ------------------------ */

.log-ticker {
    overflow: hidden;
    border-top: 1px solid var(--de-panel-border);
    border-bottom: 1px solid var(--de-panel-border);
    background: var(--bg-secondary);
    padding: 0.5rem 0;
}

.lt-track {
    display: flex;
    width: max-content;
    animation: lt-scroll 45s linear infinite;
}

.log-ticker:hover .lt-track { animation-play-state: paused; }

.lt-run {
    font-family: var(--de-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.lt-ok { color: var(--de-green); }
.lt-info { color: var(--de-teal); }
.lt-metric { color: var(--accent-primary); }
.lt-sep { opacity: 0.35; padding: 0 1rem; }

:root[data-theme="light"] .lt-ok { color: var(--de-green) !important; }
:root[data-theme="light"] .lt-info { color: var(--de-teal) !important; }
:root[data-theme="light"] .lt-metric { color: var(--accent-primary) !important; }

@keyframes lt-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .lt-track { animation: none; }
}

/* ---------- 18. Task exit lines between sections ---------------------------- */

.about::after,
.experience::after,
.projects::after,
.skills::after,
.education::after,
.certifications::after {
    content: '── task exited with code 0 ──';
    display: block;
    text-align: center;
    font-family: var(--de-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    opacity: 0.5;
    padding-top: 3rem;
}

/* ---------- 19. On-call mini-game: fix_the_dag ----------------------------- */

/* The clickable prompt under the photo. styles.css ships a legacy "AI
   activation" hover here (3D tilt, text fading out, a "Click to train the
   model" overlay, a 180° flip on click) — retire all of it. The one and only
   affordance is a small "▸ play" chip that fills amber on hover. */
.profile-title {
    background: var(--bg-secondary);
    border: 1px solid var(--de-panel-border);
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform-style: flat;
    perspective: none;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.profile-title::before {
    display: none;
    animation: none;
}

.profile-title:hover {
    transform: translateY(-2px);
    background: var(--bg-secondary);
    border-color: var(--de-panel-border-hover);
    box-shadow: none;
    filter: none;
}

:root[data-theme="light"] .profile-title {
    background: var(--bg-secondary);
    border: 1px solid var(--de-panel-border);
    box-shadow: none;
}

:root[data-theme="light"] .profile-title:hover {
    background: var(--bg-secondary);
    border-color: var(--de-panel-border-hover);
    box-shadow: none;
}

/* invite chip — sits in the normal flow after the command text */
.profile-title::after {
    content: '\25B8 simulate';
    position: static;
    font-family: var(--de-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--accent-primary);
    background: transparent;
    border: 1px solid var(--de-panel-border);
    border-radius: 3px;
    padding: 2px 7px;
    margin-left: 10px;
    opacity: 0.85;
    animation: none;
    transform: none;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.profile-title:hover::after {
    content: '\25B8 simulate';
    position: static;
    top: auto;
    left: auto;
    transform: none;
    background: var(--accent-primary);
    color: #0a0e13;
    border: 1px solid var(--accent-primary);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-family: var(--de-mono);
    letter-spacing: 0.05em;
    animation: none;
    opacity: 1;
    box-shadow: none;
    backdrop-filter: none;
}

/* keep the command text fully readable on hover */
.profile-title:hover .code-bracket,
.profile-title:hover .name-text,
.profile-title:hover .cursor-blink {
    opacity: 1;
    transform: none;
}

/* click feedback: a quiet press, not a 180° flip */
.profile-title:active {
    transform: translateY(0) scale(0.98);
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    box-shadow: none;
    transition: transform 0.15s ease;
}

.profile-title:active .code-bracket,
.profile-title:active .name-text,
.profile-title:active .cursor-blink {
    animation: none;
}

.ai-game-container {
    background: var(--bg-secondary);
    border: 1px solid var(--de-panel-border);
    border-radius: 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 30px 80px var(--shadow-color);
    /* calm, professional entrance — no bounce, no 3D flip */
    width: min(calc(100vw - 28px), 520px);
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 20px;
    transform: translate(-50%, -48%) scale(0.985);
    /* CRITICAL: while closed the dialog must be fully inert — an opacity-0
       element at z-index 99999 otherwise swallows every tap on the page */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.25s;
}

.ai-game-container.active {
    transform: translate(-50%, -50%) scale(1);
    animation: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

:root[data-theme="light"] .ai-game-container {
    background: var(--bg-secondary);
    border: 1px solid var(--de-panel-border);
    box-shadow: 0 30px 80px var(--shadow-color);
}

.ai-game-container::before { display: none; }

/* solid dimmed backdrop — heavy blur is slow and glitchy on mobile Safari */
.ai-game-backdrop {
    background: rgba(6, 9, 13, 0.74);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .ai-game-backdrop {
    background: rgba(25, 28, 33, 0.4);
}

.ai-game-header h3 {
    font-family: var(--de-mono);
    font-size: 1rem;
    text-shadow: none;
    animation: none;
}

.ai-game-header h3::after {
    content: 'pipeline reliability simulation';
    color: var(--text-muted);
    font-family: var(--de-mono);
}

.sim-meta {
    font-family: var(--de-mono);
    font-size: 0.66rem;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px solid var(--de-panel-border);
    border-radius: 4px;
    padding: 0.45rem 0.65rem;
    margin-bottom: 12px;
}

:root[data-theme="light"] .sim-meta { color: var(--text-muted); }

.game-status p {
    font-family: var(--de-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Metrics readout: one unified strip with hairline dividers — four floating
   boxes wrapped unevenly on phones and read as clutter. Tabular numerals and
   a reserved value line keep the strip rock-steady while numbers change. */
.dag-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0 10px;
    border: 1px solid var(--de-panel-border);
    border-radius: 4px;
    background: var(--bg-primary);
    overflow: hidden;
}

.dag-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 4px;
    border: none;
    border-left: 1px solid var(--de-panel-border);
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.dag-stat:first-child { border-left: none; }

.ds-label {
    font-family: var(--de-mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.ds-value {
    font-family: var(--de-mono);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    min-height: 1.2em;
    white-space: nowrap;
}

/* narrow screens: clean 2×2 with dividers on both axes */
@media (max-width: 480px) {
    .dag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dag-stat:nth-child(3) { border-left: none; }

    .dag-stat:nth-child(3),
    .dag-stat:nth-child(4) {
        border-top: 1px solid var(--de-panel-border);
    }
}

.sla-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
    margin-bottom: 14px;
}

.sla-fill {
    height: 100%;
    width: 100%;
    background: var(--de-green);
    transition: width 0.5s ease, background 0.5s ease;
}

.sla-fill.warn { background: var(--accent-primary); }
.sla-fill.crit { background: var(--de-red); }

.dag-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dag-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 9px;
    border: 1px solid var(--de-panel-border);
    border-radius: 4px;
    background: var(--bg-primary);
    font-family: var(--de-mono);
    font-size: 0.63rem;
    color: var(--text-secondary);
    text-align: left;
    cursor: default;
    transition: border-color 0.2s ease, transform 0.1s ease;
}

.dag-cell .dc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.45;
}

.dag-cell.is-ok .dc-dot { background: var(--de-green); opacity: 1; }

.dag-cell.is-failed {
    border-color: var(--de-red);
    cursor: pointer;
    animation: dag-alarm 0.9s ease-in-out infinite;
}

.dag-cell.is-failed .dc-dot { background: var(--de-red); opacity: 1; }

.dag-cell.is-failed:hover { transform: scale(1.04); }

.dag-cell.is-fixing { border-color: var(--accent-primary); }

.dag-cell.is-fixing .dc-dot {
    background: var(--accent-primary);
    opacity: 1;
    animation: de-blink 0.35s steps(1) infinite;
}

@keyframes dag-alarm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 87, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(255, 92, 87, 0); }
}

.reset-btn, .reset-score-btn {
    font-family: var(--de-mono);
    border-radius: 4px;
}

@media (max-width: 430px) {
    .dag-board { grid-template-columns: repeat(2, 1fr); }
    .dag-cell { font-size: 0.6rem; }
}

/* ---------- 20. Day-shift (light mode) corrections --------------------------
   styles.css ships a blanket `:root[data-theme="light"] *` color rule with
   (0,2,0) specificity that steamrolls single-class mono elements. Re-assert
   their intended colors here with higher specificity. */

:root[data-theme="light"] .nl-cmd { color: var(--text-secondary); }

:root[data-theme="light"] .nl-label,
:root[data-theme="light"] .nl-time,
:root[data-theme="light"] .nav-clock,
:root[data-theme="light"] .logo-branch,
:root[data-theme="light"] .lt-run,
:root[data-theme="light"] .footer-exit,
:root[data-theme="light"] .section-subtitle,
:root[data-theme="light"] .timeline-date,
:root[data-theme="light"] .ds-label,
:root[data-theme="light"] .cert-date,
:root[data-theme="light"] .cert-id {
    color: var(--text-muted);
}

:root[data-theme="light"] .dag-cell,
:root[data-theme="light"] .game-status p,
:root[data-theme="light"] .tech-tag,
:root[data-theme="light"] .tech-item,
:root[data-theme="light"] .skill-item,
:root[data-theme="light"] .tech-tags span {
    color: var(--text-secondary);
}

:root[data-theme="light"] .project-status { color: var(--de-green); }
:root[data-theme="light"] .project-status.internal { color: var(--text-muted); }
:root[data-theme="light"] .project-link.disabled { color: var(--text-muted); }

/* Terminals stay dark in both shifts — a terminal is a terminal.
   The blanket light rule would ink out the syntax colors, so re-assert them. */
:root[data-theme="light"] .ai-terminal {
    background: #0d1219 !important;
    border-color: rgba(25, 28, 33, 0.3);
}

:root[data-theme="light"] .terminal-body { background: #0d1219 !important; }
:root[data-theme="light"] .terminal-header { background: #151d28 !important; border-bottom-color: rgba(246, 179, 27, 0.16); }
:root[data-theme="light"] .terminal-title { color: #8b96a3 !important; }

:root[data-theme="light"] .terminal-body .prompt { color: #3ddc84 !important; }
:root[data-theme="light"] .terminal-body .command { color: #e8ebef !important; }
:root[data-theme="light"] .terminal-body .success { color: #f6b31b !important; }
:root[data-theme="light"] .terminal-body .metric { color: #35d0ba !important; }
:root[data-theme="light"] .terminal-body .typing-cursor { color: #3ddc84 !important; }
:root[data-theme="light"] .terminal-body .keyword { color: #ff6b9d !important; }
:root[data-theme="light"] .terminal-body .class-name { color: #61dafb !important; }
:root[data-theme="light"] .terminal-body .function { color: #ffd93d !important; }
:root[data-theme="light"] .terminal-body .variable { color: #c9d1d9 !important; }
:root[data-theme="light"] .terminal-body .string { color: #98d982 !important; }
:root[data-theme="light"] .terminal-body .boolean { color: #ff7b72 !important; }
:root[data-theme="light"] .terminal-body .line-number { color: #5c6570 !important; }
:root[data-theme="light"] .terminal-body .cursor { color: #3ddc84 !important; }
:root[data-theme="light"] .terminal-body .indent { color: transparent !important; }

/* capability matrix header sits on a light panel — keep its title readable */
:root[data-theme="light"] .matrix-title { color: var(--text-secondary); }
:root[data-theme="light"] .cap-label, :root[data-theme="light"] .cap-value { color: var(--text-secondary); }

/* profile play chip hover in light mode: dark text on amber still reads */
:root[data-theme="light"] .profile-title:hover::after { color: #fffdf7; }

/* ---------- 21. Small-phone navbar width budget ----------------------------
   On 375-390px iPhones the logo + controls + old 1.5rem gaps exceeded the
   viewport, clipping the hamburger off the right edge. Tighten everything
   and drop the branch label so the hamburger always fits. */

.nav-container { flex-wrap: nowrap; }
.nav-controls { flex-shrink: 0; }
.hamburger { flex-shrink: 0; }

@media (max-width: 600px) {
    .nav-container {
        padding: 0 14px;
        gap: 0.6rem;
    }

    .nav-controls {
        gap: 0.55rem;
        padding: 0;
        border-top: none;
    }

    .nav-logo .logo-branch { display: none; }
    .nav-logo h2 { font-size: 0.88rem; }

    .lang-btn {
        min-width: 0;
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
        gap: 0.25rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
    }
}

/* ---------- 22. The oncall prompt is now a real <button> ------------------- */

.profile-title {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    text-align: left;
    position: relative;
    z-index: 5;
}

/* touch devices get no hover state — first tap must act, not "hover" */
@media (hover: none) {
    .profile-title:hover {
        transform: none;
        border-color: var(--de-panel-border);
    }

    .profile-title:hover::after {
        background: transparent;
        color: var(--accent-primary);
        border-color: var(--de-panel-border);
    }

    .dag-cell.is-failed:hover { transform: none; }
}

/* ---------- 23. Simulation dialog: retire the last legacy chrome ----------- */

/* header: no growing underline, subtitle sits statically under the title */
.ai-game-header {
    border-bottom: 1px solid var(--de-panel-border);
    margin-bottom: 14px;
    padding-bottom: 10px;
    align-items: flex-start;
}

.ai-game-header::after { display: none; }

.ai-game-header h3::after {
    position: static;
    display: block;
    top: auto;
    left: auto;
    margin-top: 3px;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: normal;
    color: var(--text-muted);
}

/* status line: plain log text, not a glowing glass box */
.game-status {
    text-align: left;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

:root[data-theme="light"] .game-status {
    background: transparent;
    border: none;
    box-shadow: none;
}

.game-status p,
.game-status p:first-child {
    margin: 0;
    font-family: var(--de-mono);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    text-shadow: none;
}

:root[data-theme="light"] .game-status p,
:root[data-theme="light"] .game-status p:first-child {
    color: var(--text-secondary);
}

/* close button: quiet square */
.close-game {
    background: transparent;
    border: 1px solid var(--de-panel-border);
    border-radius: 4px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.close-game::before { display: none; }

.close-game:hover {
    color: var(--de-red);
    border-color: var(--de-red);
    background: transparent;
    transform: none;
    box-shadow: none;
}

/* run button: flat terminal command, no shine sweep, no bounce */
.reset-btn, .reset-score-btn {
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: #0a0e13;
    padding: 0.6rem 1.3rem;
    border-radius: 4px;
    font-family: var(--de-mono);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
}

:root[data-theme="light"] .reset-btn,
:root[data-theme="light"] .reset-score-btn {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fffdf7;
    box-shadow: none;
}

.reset-btn::before, .reset-score-btn::before { display: none; }

.reset-btn:hover, .reset-score-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: none;
    box-shadow: none;
}

.reset-btn:active, .reset-score-btn:active {
    transform: scale(0.98);
}

.game-controls { margin-top: 14px; }

/* phone-size dialog: tighter rhythm, everything visible without squinting */
@media (max-width: 480px) {
    .ai-game-container {
        width: calc(100vw - 16px);
        padding: 14px;
        border-radius: 6px;
    }

    .ai-game-header h3 { font-size: 0.9rem; }
    .sim-meta { font-size: 0.58rem; padding: 0.4rem 0.55rem; }
    .game-status p, .game-status p:first-child { font-size: 0.68rem; }

    .dag-stat { padding: 7px 4px; }
    .ds-label { font-size: 0.52rem; }
    .ds-value { font-size: 0.84rem; }

    .dag-board { gap: 6px; }
    .dag-cell { padding: 9px 7px; font-size: 0.58rem; gap: 6px; }

    .reset-btn, .reset-score-btn { width: 100%; }
}