/* ============================================================
   components.css — buttons, chips, commit cards, terminal,
   and all the animation/polish lives here.
   ============================================================ */

/* ---- CTA buttons ---- */
.cta{
  display:flex; align-items:center; gap:11px; padding:12px 15px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  font-size:14px; font-weight:500; color:var(--text);
  transition:border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.cta:hover{ border-color:var(--accent); transform:translateX(3px); background:var(--panel-2); }
.cta .ic{ width:18px; text-align:center; color:var(--accent); font-family:var(--mono); font-size:13px; }
.cta.primary{ background:var(--accent); color:#06121a; border-color:var(--accent); }
.cta.primary .ic{ color:#06121a; }
.cta.primary:hover{ filter:brightness(1.08); transform:translateX(3px); }

/* ---- branch chips ---- */
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 12px; margin:0 8px 8px 0; border-radius:20px;
  border:1px solid var(--line); background:transparent;
  font-size:12.5px; color:var(--text-dim); font-family:var(--mono);
  transition:all .15s var(--ease);
}
.chip i{ width:8px; height:8px; border-radius:50%; transition:transform .15s var(--ease); }
.chip:hover{ border-color:var(--text-dim); color:var(--text); }
.chip:hover i{ transform:scale(1.3); }
.chip.off{ opacity:.32; }

/* ---- commit cards + branch track ---- */
.commit{
  position:relative; display:grid; grid-template-columns:30px 1fr; gap:16px;
  padding:18px 0; cursor:pointer;
  opacity:0; transform:translateY(14px);
}
.commit.in{ opacity:1; transform:translateY(0); transition:opacity .5s var(--ease), transform .5s var(--ease); }

.track{ position:relative; }
.track::before{
  content:""; position:absolute; left:50%; top:-18px; bottom:-18px; width:2px;
  transform:translateX(-50%) scaleY(0); transform-origin:top;
  background:var(--node-c,#444); opacity:.32;
  transition:transform .5s var(--ease);
}
.commit.in .track::before{ transform:translateX(-50%) scaleY(1); }
.commit:first-of-type .track::before{ top:50%; }
.commit:last-of-type .track::before{ bottom:50%; }

.node{
  position:absolute; left:50%; top:6px; width:14px; height:14px; transform:translateX(-50%) scale(0);
  border-radius:50%; background:var(--bg); border:2.5px solid var(--node-c,#888);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.commit.in .node{ transform:translateX(-50%) scale(1); transition:transform .4s var(--ease) .15s; }
.commit:hover .node{ transform:translateX(-50%) scale(1.18); }
.commit.head .node,
.commit.ongoing .node{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--node-c) 35%, transparent); }
  50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--node-c) 0%, transparent); }
}

/* finished work = a solid, "merged" node */
.commit.done .node{ background:var(--node-c); }

/* a point-in-time event (hackathon, transfer) = a small diamond */
.commit.point .node{ border-radius:3px; }
.commit.point.in .node{ transform:translateX(-50%) scale(1) rotate(45deg); }
.commit.point:hover .node{ transform:translateX(-50%) scale(1.18) rotate(45deg); }

/* ongoing work = a glowing, flowing branch line */
.commit.ongoing .track::before{
  opacity:.85;
  background:repeating-linear-gradient(180deg,
    var(--node-c) 0 6px, transparent 6px 13px);
  animation:flowline .85s linear infinite;
}
@keyframes flowline{ to{ background-position:0 13px; } }

.card{
  border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:15px 18px;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.commit:hover .card{ border-color:color-mix(in srgb, var(--node-c) 55%, var(--line)); transform:translateY(-2px); }
.commit.open .card{ border-color:var(--node-c); background:var(--panel-2); }

.c-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.c-msg{ font-weight:500; font-size:15.5px; color:var(--text); }
.c-branch{
  font-family:var(--mono); font-size:11px; padding:2px 9px; border-radius:20px; color:var(--node-c);
  border:1px solid color-mix(in srgb, var(--node-c) 45%, transparent);
  background:color-mix(in srgb, var(--node-c) 12%, transparent);
}

/* duration / status pill — sits to the right of the branch tag */
.c-dur{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  padding:2px 8px; border-radius:20px; color:var(--text-faint);
  border:1px solid var(--line); white-space:nowrap;
}
.c-dur.live{
  color:var(--node-c);
  border-color:color-mix(in srgb, var(--node-c) 45%, transparent);
  background:color-mix(in srgb, var(--node-c) 12%, transparent);
}
.c-dur.live::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px;
  border-radius:50%; background:var(--node-c); vertical-align:middle;
  box-shadow:0 0 7px var(--node-c); animation:blink 1.4s ease-in-out infinite;
}
.c-meta{ margin-top:5px; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.c-meta .hash{ color:var(--node-c); }

.diff{ overflow:hidden; max-height:0; transition:max-height .3s var(--ease); }
.commit.open .diff{ max-height:340px; }
.diff-inner{ margin-top:13px; padding-top:13px; border-top:1px dashed var(--line); font-family:var(--mono); font-size:13px; }
.diff-line{ padding:1px 0; opacity:0; transform:translateX(-6px); }
.commit.open .diff-line{ opacity:1; transform:translateX(0); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.diff-line.add{ color:var(--add); }
.diff-line.del{ color:var(--del); }
.diff-line .g{ color:var(--text-faint); user-select:none; }

/* one-line preview so a skim shows what each commit was; the full diff replaces it when open */
.c-sum{ margin-top:7px; font-size:13.5px; color:var(--text-dim); }
.commit.open .c-sum{ display:none; }
.c-repo{
  display:inline-block; margin-top:11px; font-family:var(--mono); font-size:12.5px;
  color:var(--node-c); border-bottom:1px solid transparent; transition:border-color .15s var(--ease);
}
.c-repo:hover{ border-bottom-color:var(--node-c); }

/* ---- terminal toggle + drawer ---- */
.term-toggle{
  position:fixed; right:22px; bottom:22px; z-index:30; display:flex; align-items:center; gap:9px;
  padding:11px 17px; border-radius:30px; cursor:pointer; background:var(--panel-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:13px; color:var(--text);
  box-shadow:0 8px 30px rgba(0,0,0,.4); transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.term-toggle:hover{ border-color:var(--accent); transform:translateY(-2px); }
.term-toggle .dotg{ width:8px; height:8px; border-radius:50%; background:var(--add); box-shadow:0 0 8px var(--add); animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.35; } }

.drawer{
  position:fixed; left:0; right:0; bottom:0; z-index:40; height:min(58vh,460px);
  transform:translateY(100%); transition:transform .34s var(--ease);
  background:var(--bg-soft); border-top:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.drawer.show{ transform:translateY(0); }
.drawer-bar{ display:flex; align-items:center; gap:8px; padding:10px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--text-dim); }
.drawer-bar .tl{ width:11px; height:11px; border-radius:50%; }
.drawer-title{ margin-left:7px; }
.drawer-bar .x{ margin-left:auto; cursor:pointer; color:var(--text-faint); padding:2px 8px; border-radius:6px; background:none; border:none; font-family:var(--mono); font-size:12px; }
.drawer-bar .x:hover{ color:var(--text); background:var(--panel); }
.term-body{ flex:1; overflow-y:auto; padding:16px 20px; font-family:var(--mono); font-size:13px; white-space:pre-wrap; word-break:break-word; }
.tl-line{ margin-bottom:2px; }
.t-prompt{ color:var(--add); } .t-in{ color:var(--text); } .t-out{ color:var(--text-dim); }
.t-add{ color:var(--add); } .t-del{ color:var(--del); } .t-h{ color:var(--text); font-weight:500; }
.t-link{ color:var(--accent); }
.term-form{ display:flex; align-items:center; gap:9px; padding:11px 20px; border-top:1px solid var(--line); }
.term-form .ps{ color:var(--add); font-family:var(--mono); }
.term-form input{ flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:var(--mono); font-size:13px; }

.cursor{ display:inline-block; width:8px; background:var(--add); animation:blink 1.1s steps(1) infinite; }

/* ---- custom scrollbars ---- */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#33405a; }

/* ---- a11y / motion floor ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .commit{ opacity:1; transform:none; }
  .track::before{ transform:translateX(-50%) scaleY(1); }
  .node{ transform:translateX(-50%) scale(1); }
}