/* ============================================================
   dogoda. - Path (Pad) page styles
   The heart of the site: narrative → timeline → toolkit
   Single-column spine. Warm & slow, sophisticated interaction.
   ============================================================ */

/* ---- Layer 1: narrative -------------------------------- */
.path-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(255px, 0.8fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.path-intro-main { min-width: 0; }
@media (max-width: 880px) { .path-intro { grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3rem); } }

/* "Currently working on" card */
.now-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); position: relative; overflow: hidden; }
.now-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.now-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 0.6em; margin: 0; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 0 rgba(255,39,49,0.5); animation: nowpulse 2.4s var(--ease) infinite; }
@keyframes nowpulse { 0% { box-shadow: 0 0 0 0 rgba(255,39,49,0.45); } 70% { box-shadow: 0 0 0 9px rgba(255,39,49,0); } 100% { box-shadow: 0 0 0 0 rgba(255,39,49,0); } }
@media (prefers-reduced-motion: reduce) { .now-dot { animation: none; } }
.now-role { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0.9rem 0 0; }
.now-meta { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin: 0.45rem 0 0; }
.now-quote { color: var(--ink-soft); font-style: italic; font-size: 0.98rem; line-height: 1.5; margin: 1.1rem 0 0; }

.narrative { max-width: 62ch; }
.narrative .lead { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); line-height: 1.58; color: var(--ink); font-weight: 400; }
.narrative .body { font-size: clamp(1rem, 0.97rem + 0.18vw, 1.1rem); line-height: 1.62; color: var(--ink-soft); }
.narrative p + p { margin-top: 1.1em; }
.narrative .hl { color: var(--red); font-weight: 600; }
.phase-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.7rem; margin-top: var(--s-4); }
.phase-flow .ph-step { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--ink-soft); border: 1px solid var(--rule); background: var(--paper); border-radius: var(--r-pill); padding: 0.5em 0.9em; }
.phase-flow .ph-arrow { color: var(--mute); font-size: 0.85rem; }
@media (max-width: 640px) {
  .phase-flow { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; }
  .phase-flow::-webkit-scrollbar { display: none; }
  .ph-step, .ph-arrow { white-space: nowrap; flex-shrink: 0; }
}

/* ---- Filter bar ---------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; position: sticky; top: clamp(64px, 5vw, 86px); z-index: 30; padding: 0.9rem 0; background: color-mix(in oklab, var(--cream) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.filter-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-right: 0.3rem; }
.filter-chip { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em; padding: 0.5em 0.9em; border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: all 0.3s var(--ease); display: inline-flex; align-items: center; gap: 0.45em; }
.filter-chip .ct { font-size: 0.68rem; color: var(--mute); transition: color 0.3s; }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip:hover .ct { color: var(--ink-soft); }
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.filter-chip.active .ct { color: rgba(241,240,237,0.6); }
.filter-chip[data-phase="all"].active { background: var(--red); border-color: var(--red); }
.filter-chip[data-phase="all"].active .ct { color: rgba(241,240,237,0.7); }

@media (max-width: 640px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip { white-space: nowrap; flex-shrink: 0; min-height: 40px; padding: 0.6em 1em; }
}
@supports (top: 1svh) {
  .filter-bar { top: clamp(64px, 5svh, 86px); }
}

/* status line */
.tl-status { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.1rem; min-height: 1.4em; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--mute); }
.tl-status .cnt { color: var(--ink); font-weight: 500; }
.tl-status .trace { color: var(--red); }
.tl-status .reset { color: var(--ink-soft); border-bottom: 1px solid var(--rule); cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.tl-status .reset:hover { color: var(--red); border-color: var(--red); }

/* ---- Timeline (single left spine) ---------------------- */
.timeline { position: relative; margin-top: var(--s-5); padding-left: clamp(1.75rem, 1rem + 3vw, 3rem); }
.timeline-spine { position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--rule); border-radius: 2px; }
.timeline-spine::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--spine-progress, 0%); background: var(--red); border-radius: 2px; transition: height 0.15s linear; }

.tl-item { position: relative; margin-bottom: clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem); }
.tl-item.leaving { opacity: 0; transform: scale(0.975); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); pointer-events: none; }
.tl-item.hidden { display: none; }

.tl-node { position: absolute; left: calc(-1 * clamp(1.75rem, 1rem + 3vw, 3rem) + 7px); transform: translateX(-50%); top: 1.6rem; width: 13px; height: 13px; border-radius: 50%; background: var(--cream); border: 2px solid var(--mute); z-index: 2; transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.tl-item.in .tl-node { border-color: var(--red); }
.tl-item.current .tl-node { background: var(--red); border-color: var(--red); }
.tl-item.active .tl-node { transform: translateX(-50%) scale(1.45); box-shadow: 0 0 0 6px var(--red-wash); border-color: var(--red); }

.tl-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.2rem, 1rem + 1.3vw, 1.85rem); transition: transform 0.45s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.tl-item.active .tl-card { border-color: color-mix(in oklab, var(--red) 28%, var(--rule)); box-shadow: var(--lift); }
.tl-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--red) 30%, var(--rule)); box-shadow: var(--lift); }

.tl-meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.tl-period { font-family: var(--mono); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.03em; color: var(--red); }
.tl-no { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--mute); margin-left: auto; }
.tl-phases { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tl-phase-tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 0.35em 0.72em; cursor: pointer; transition: all 0.25s var(--ease); }
.tl-phase-tag:hover { border-color: var(--ink); color: var(--ink); }
.tl-phase-tag.on { background: var(--red); border-color: var(--red); color: var(--cream); }
.tl-role { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); letter-spacing: -0.02em; margin-top: 0.7rem; line-height: 1.12; }
.tl-org { font-family: var(--sans); font-weight: 500; font-size: 0.92rem; color: var(--mute); margin-top: 0.3em; }
.tl-org .badge { display: inline-block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--r-pill); padding: 0.25em 0.6em; margin-left: 0.5em; vertical-align: middle; }
.tl-org .badge.now { color: var(--sage); border: 1px solid color-mix(in oklab, var(--sage) 40%, var(--rule)); }
.tl-org .badge.founded { color: var(--red); border: 1px solid color-mix(in oklab, var(--red) 45%, var(--rule)); background: var(--red-wash); }
.tl-core { color: var(--ink-soft); margin-top: 0.85rem; max-width: 60ch; font-size: 0.98rem; line-height: 1.55; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.tl-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.01em; padding: 0.4em 0.72em; border-radius: var(--r-pill); border: 1px solid var(--rule); color: var(--ink-soft); background: var(--cream); cursor: pointer; transition: all 0.25s var(--ease); }
.tl-tag:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.tl-tag.tool { color: var(--sage); border-color: color-mix(in oklab, var(--sage) 32%, var(--rule)); }
.tl-tag.tool:hover { border-color: var(--sage); }
.tl-tag.match { background: var(--red); border-color: var(--red); color: var(--cream); }

/* ---- Layer 3: toolkit ---------------------------------- */
.toolkit-group { padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.25rem); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(1rem, 0.5rem + 2vw, 3rem); }
.toolkit-group:last-child { border-bottom: 1px solid var(--rule); }
.toolkit-group .tg-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); letter-spacing: -0.02em; }
.toolkit-group .tg-title .count { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; color: var(--mute); display: block; margin-top: 0.4em; letter-spacing: 0.08em; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; align-content: flex-start; }
@media (max-width: 720px) { .toolkit-group { grid-template-columns: 1fr; gap: var(--s-2); } }

/* certs row */
.cert-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.cert { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; padding: 0.6em 1em; border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); transition: all 0.3s var(--ease); }
.cert:hover { border-color: var(--red); color: var(--ink); transform: translateY(-2px); }
.cert.flag { border-color: var(--red); color: var(--red); font-weight: 500; }

/* education list */
.edu-list { list-style: none; padding: 0; margin: 0; }
.edu-list li { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.98rem; }
.edu-list li::before { content: "·"; color: var(--red); font-weight: 800; font-size: 1.4rem; line-height: 0; }

.filter-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tl-tag:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.tl-phase-tag:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cert:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }