/* ==========================================================================
   Work Timeline — Clean CSS
   ========================================================================== */

/* ---------- Theme & Sizing ------------------------------------------------ */
:root{
  /* Colors */
  --bg:#0b0b12;
  --panel:#11111b;
  --edge:#1b1b2a;
  --text:#e7e9ff;
  --muted:#a5a8c7;
  --brand:#8b5cf6;     /* purple (technologies) */
  --accent:#7dd3fc;    /* blue (skills) */
  --chip:#17172a;
  --ok:#3ddc97;

  /* Timeline geometry */
  --gap:44px;          /* spacing between cards on timeline */
  --card-w:320px;      /* width of each card */
  --track-h:6px;       /* thickness of the central line */
  --y-gap:12px;        /* space between card and the line */
  --nub:16px;          /* stem length */
}

/* ---------- Base / Reset -------------------------------------------------- */
* { box-sizing:border-box; }

html, body {
  height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  padding:16px;
  color:var(--text);
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(900px 600px at 100% -10%, rgba(139,92,246,.25), transparent),
    var(--bg);
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  gap:14px;
}

.header{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
}

.title{ font-size:1.6rem; font-weight:800; }
.muted{ color:var(--muted); }

.panel{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:12px;
  overflow:hidden;
}

/* ---------- Buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .75rem;
  border-radius:10px;
  border:1px solid var(--edge);
  background:var(--panel);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:opacity .15s ease;
}
.btn:hover{ opacity:.9; }
.btn.primary{ background:linear-gradient(135deg,var(--brand),var(--accent)); border:none; }
.btn.ghost{ background:transparent; }

.toolbar{ display:flex; align-items:center; gap:12px; }
.toolbar .spacer{ flex:1; }

/* ---------- Timeline ------------------------------------------------------ */
.timeline-wrap{
  overflow:auto hidden;
  padding:18px 18px 28px;
  scroll-snap-type:x proximity;
  min-width:0;                 /* prevent intrinsic min-content overflow */
}
.timeline{
  position:relative;
  z-index:0;
  display:flex;
  align-items:center;
  gap:var(--gap);
  min-height:320px;
  padding:36px 8px;
  width:max-content;
  min-width:100%;
}

/* central track (solid + chevron mask) */
.timeline::before{
  content:"";
  position:absolute;
  left:12px; right:52px;       /* leave space for arrow head */
  top:50%;
  transform:translateY(-50%);
  height:var(--track-h);
  background:#3a3d7a;
  border-radius:999px;
  z-index:0;
  -webkit-mask:repeating-linear-gradient(135deg,#000 0 14px,transparent 14px 20px);
          mask:repeating-linear-gradient(135deg,#000 0 14px,transparent 14px 20px);
}

/* arrow head on the right */
.timeline::after{
  content:"";
  position:absolute; right:22px; top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:16px; height:16px;
  border-right:6px solid #3a3d7a;
  border-top:6px solid #3a3d7a;
  z-index:0;
}

/* point container (snap target) */
.point{
  position:relative;
  width:var(--card-w);
  display:grid;
  grid-template-rows:1fr var(--y-gap) var(--track-h) var(--y-gap) 1fr;
  scroll-snap-align:center;
  z-index:1;
}

/* connector stem */
.point::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:var(--nub);
  background:#5457a8;
  border-radius:2px;
  z-index:0;
}

/* dot on the track */
.point::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:12px; height:12px;
  background:#2a2a46;
  border:2px solid #6b6ee8;
  border-radius:50%;
  z-index:0;
}

/* card placement & stem direction */
.point.top::before{
  top:calc(50% - var(--track-h)/2 - var(--nub));     /* stem up */
}
.point.bottom::before{
  top:calc(50% + var(--track-h)/2);                  /* stem down */
}
.point.top .card   { grid-row:1; align-self:end; }
.point.bottom .card{ grid-row:5; align-self:start; }

/* card */
.card{
  background:rgba(23,23,42,.96);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:12px;
  outline:1px solid transparent;
  position:relative;
  z-index:2;
  transition: box-shadow .18s ease, transform .18s ease, outline .18s ease;
  cursor:pointer;
}
.card:hover{
  outline:1px solid rgba(139,92,246,.65);
  box-shadow:0 0 0 6px rgba(139,92,246,.08);
  transform:translateY(-2px);
}
.card h4{ margin:.1rem 0 .25rem; font-size:1.05rem; }
.card .sub{ font-size:.92rem; color:var(--muted); }

/* ---------- Chips (filters & modal) -------------------------------------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.28rem .55rem;
  background:var(--chip);
  border:1px solid var(--edge);
  border-radius:999px;
  color:var(--muted);
  font-size:.9rem;
  user-select:none;
  cursor:pointer;
  transition: filter .15s, box-shadow .15s, background-color .15s, border-color .15s;
}

/* Technologies (purple) */
.chip--tech{
  border-color:color-mix(in oklab, var(--brand) 60%, var(--edge));
  background:color-mix(in oklab, var(--brand) 12%, var(--chip));
  color:var(--text);
}
.chip--tech.active{
  background:color-mix(in oklab, var(--brand) 20%, var(--chip));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 55%, transparent);
}

/* Skills (blue) */
.chip--skill{
  border-color:color-mix(in oklab, var(--accent) 60%, var(--edge));
  background:color-mix(in oklab, var(--accent) 12%, var(--chip));
  color:var(--text);
}
.chip--skill.active{
  background:color-mix(in oklab, var(--accent) 20%, var(--chip));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* generic interactions */
.chip:hover,
.chip:focus-visible{ filter:brightness(1.05); outline:none; }
.chip[aria-pressed="true"]{ outline:0; }

/* ---------- Scrollbars ---------------------------------------------------- */
/* Global (Firefox) */
*{
  scrollbar-width:thin;
  scrollbar-color:
    color-mix(in oklab, var(--brand) 70%, var(--accent) 30%)
    var(--edge);
}

/* Global (Chromium/WebKit) */
body::-webkit-scrollbar,
.scrollbar::-webkit-scrollbar{ width:10px; height:10px; }
body::-webkit-scrollbar-track,
.scrollbar::-webkit-scrollbar-track{
  background:var(--edge);
  border-radius:999px;
}
body::-webkit-scrollbar-thumb,
.scrollbar::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:2px solid var(--edge);
  background:linear-gradient(135deg,var(--brand),var(--accent));
}
body::-webkit-scrollbar-thumb:hover,
.scrollbar::-webkit-scrollbar-thumb:hover{ filter:brightness(1.1); }
body::-webkit-scrollbar-corner,
.scrollbar::-webkit-scrollbar-corner{ background:transparent; }

/* Timeline-only scrollbar (Chromium/WebKit) */
.timeline-wrap::-webkit-scrollbar{ height:10px; }
.timeline-wrap::-webkit-scrollbar-track{
  background:#161627;
  border-radius:10px;
}
.timeline-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#6b6ee8,#8b5cf6);
  border-radius:10px;
  border:2px solid #161627;
}
.timeline-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#7b7ef8,#a08afc);
}
/* Timeline-only (Firefox) */
.timeline-wrap{
  scrollbar-color:#7b7ef8 #161627;
  scrollbar-width:thin;
}

/* ---------- Modal (job details) ------------------------------------------ */
dialog::backdrop{
  background:rgba(4,6,18,.55);
  backdrop-filter:blur(3px);
}
dialog{
  border:none;
  padding:0;
  background:transparent;
  color:var(--text);
}

.modal-card{
  width:min(760px,92vw);
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:16px;
  color:var(--text);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.modal-head h3{ margin:0; font-size:1.25rem; }
.modal-card .sub,
.modal-card li{ color:var(--muted); }
.modal-card ul{ margin:.75rem 0 0; padding-left:1.1rem; }
.modal-card li{ margin:.25rem 0; }

/* ---------- Inline Filters (desktop) ------------------------------------- */
.filters-panel{ padding:12px; margin-top:4px; }
.filters-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.show-filter-description{ display:none; } /* optional helper text */

/* ---------- Mobile Filter Sheet ------------------------------------------ */
.filter-sheet::backdrop{
  background:rgba(4,6,18,.55);
  backdrop-filter:blur(3px);
}
.filter-sheet{
  border:none;
  padding:0;
  background:transparent;
}
.filter-sheet .sheet-card{
  width:min(760px,96vw);
  max-height:80vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:16px;
  padding:14px;
  margin:auto;           /* centers on larger screens */
}
.filter-sheet .sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.filter-sheet .sheet-actions{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}
.filter-sheet .sheet-actions .spacer{ flex:1; }

/* ---------- Responsive: vertical timeline on small screens --------------- */
@media (max-width:768px){
  :root{
    --card-w:100%;
    --y-gap:14px;
    --nub:18px;
  }

  .timeline-wrap{
    overflow-y:auto;
    overflow-x: hidden;
    padding:12px 12px 20px;
    scroll-snap-type:y proximity;
  }

  .timeline{
    display:block;
    min-height:auto;
    min-width: 0;
    padding:8px 0;
  }
  
  .timeline-wrap::-webkit-scrollbar:horizontal{
    height: 0;
    display: none;
  }  

  /* vertical rail on the left */
  .timeline::before{
    left:24px; right:auto; top:0; bottom:0;
    width:var(--track-h); height:auto;
    transform:none;
    -webkit-mask:none; mask:none; /* solid on mobile for clarity */
    border-radius:999px;
  }
  .timeline::after{ display:none; }

  /* points stack */
  .point, .point.top, .point.bottom{
    display:block;
    width:100%;
    padding:14px 10px 24px 56px; /* space for rail + dot */
    position:relative;
    scroll-snap-align:start;
  }

  .point .card{ grid-row:auto; align-self:auto; width:100%; }

  /* vertical stem segment */
  .point::before{
    left:24px; top:0;
    width:var(--track-h); height:100%;
    transform:none;
    background:#5457a8;
    border-radius:2px;
    z-index:0;
  }

  /* dot on rail */
  .point::after{
    left:24px; top:28px;
    transform:translate(-50%,-50%);
    width:12px; height:12px;
    background:#2a2a46;
    border:2px solid #6b6ee8;
    border-radius:50%;
    z-index:1;
  }
  /* Hide scroll arrows */
  .toolbar .controls {
    display: none !important;
  }
  dialog .modal-card{
    max-width: 100vw;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .modal-card h3,
  .modal-card p,
  .modal-card li,
  .modal-card .sub{
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .card{ padding:12px; }
  .card h4{ font-size:1rem; }
  .card .sub{ font-size:.9rem; }

  /* filters: hide big chip cloud; use sheet button */
  .filters-panel .chip-row{ display:none; }
  .filters-panel .show-filter-sheet{ display:inline-flex; }
  .filters-desktop-only { display: none !important; }
  .filters-panel .show-filter-sheet { display: inline-flex !important; }
  /* if you show group titles only on desktop: */
  .filters-panel .group-title { display: none; }
  /* also keep any desktop chip clouds hidden on mobile */
  .filters-panel .chip-row { display: none; }
}

/* show desktop chip cloud / hide sheet button on wider screens */
@media (min-width:769px){
  .filters-panel .show-filter-sheet { display: none !important; }
}

/* --- Modal banner (company image) --- */
.modal-banner {
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin-bottom: 12px;
  background: var(--edge);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.modal-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-title{margin:.25rem 0 .35rem; font-weight:700; font-size:.95rem; color:var(--muted)}

#reset-filters-desktop {
  font-size: 0.85rem;
  padding: 6px 10px;
  color: var(--muted);
  border: 1px solid var(--edge);
  background: var(--chip);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#reset-filters-desktop:hover {
  color: var(--text);
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, var(--chip));
}

.filters-desktop-only { display: block; }