/* ================================================================
   Repo view: a GitHub-shaped project page.
   Loaded after style.css, which owns the palette and the shell.
   ================================================================ */

.repo-head{position:relative;z-index:1;padding:40px 0 0}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--faint);
  margin:0 0 14px;
}

.breadcrumb a{color:var(--muted);transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--line-hi)}
.breadcrumb .here{color:var(--text)}

.repo-title{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 8px;
}

.repo-title h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,4.6vw,2.9rem);
  letter-spacing:-.015em;
  margin:0;
}

.repo-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--accent);
  margin:0 0 22px;
}

/* ---------- sticky section tabs ---------- */

.tabs{
  position:sticky;
  top:64px;
  z-index:9;
  background:rgba(7,9,11,.88);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
}

.tabs-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs-inner::-webkit-scrollbar{display:none}

.tabs a{
  position:relative;
  padding:14px 16px;
  font-size:.9rem;
  color:var(--muted);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text);border-bottom-color:var(--accent);font-weight:500}

.tabs .tally{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
}

.tabs a.active .tally{color:var(--text);border-color:var(--line-hi)}

/* ---------- two column layout ---------- */

.layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  padding-bottom:90px;
}

@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
}

/* The sidebar scrolls with the page rather than sticking. With About,
   Languages and Activity stacked it is taller than a short viewport, and a
   sticky column would need its own scrollbar, which traps the wheel whenever
   the cursor crosses it. */

/* The heatmap sits in a narrow column, so its summary stacks instead of
   sitting on one line. */
.col-side .heat-foot{flex-direction:column;align-items:flex-start;gap:11px}
.col-side .box-body{padding:20px}

.col-main > section{scroll-margin-top:132px}
.col-main > section + section{margin-top:44px}

/* ---------- box ---------- */

.box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.box + .box{margin-top:18px}

.box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  background:var(--surface-hi);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}

.box-head strong{color:var(--text);font-weight:500}

.box-body{padding:22px}
.box-body > :first-child{margin-top:0}
.box-body > :last-child{margin-bottom:0}

/* ---------- sidebar ---------- */

.side-title{
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 14px;
}

.side-block{padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.side-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.side-list{margin:0;padding:0;list-style:none;font-size:.9rem}

.side-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  color:var(--muted);
}

.side-list li .v{color:var(--text);text-align:right}
.side-list li a.v:hover{color:var(--accent)}

/* ---------- language bar, GitHub style ---------- */

.lang-bar{
  display:flex;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-hi);
  margin:0 0 18px;
  gap:2px;
}

.lang-bar i{
  display:block;
  height:100%;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  transform-origin:center bottom;
}

.lang-bar:hover i{opacity:.4}
.lang-bar i:hover{opacity:1;transform:scaleY(1.6)}

.lang-legend{margin:0;padding:0;list-style:none}

.lang-legend li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 0;
  font-size:.9rem;
  color:var(--muted);
}

.lang-legend .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.lang-legend .name{color:var(--text)}

.lang-legend .pct{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--faint);
}

/* ---------- contribution heatmap ---------- */

.heat-scroll{overflow-x:auto;padding-bottom:4px}

.heat{display:flex;gap:3px;min-width:max-content}

.heat-week{display:flex;flex-direction:column;gap:3px}

.heat-day{
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--surface-hi);
  border:1px solid rgba(255,255,255,.04);
}

.heat-day.l1{background:rgba(95,211,154,.3);border-color:rgba(95,211,154,.22)}
.heat-day.l2{background:rgba(95,211,154,.52);border-color:rgba(95,211,154,.38)}
.heat-day.l3{background:rgba(95,211,154,.76);border-color:rgba(95,211,154,.55)}
.heat-day.l4{background:var(--accent);border-color:var(--accent)}
.heat-day.future{background:transparent;border-color:transparent}

.heat-months{
  display:flex;
  gap:3px;
  min-width:max-content;
  margin:0 0 7px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
}

/* One label column per week, matching the 12px cell width. Labels are wider
   than their column and spill over the next, which is what a contribution
   graph does; letting them set their own width would widen the whole grid. */
.heat-months span{width:12px;flex:0 0 auto;white-space:nowrap;overflow:visible}

.heat-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  flex-wrap:wrap;
  font-size:.86rem;
  color:var(--muted);
}

.heat-key{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.heat-key .heat-day{width:11px;height:11px}

/* ---------- milestones ---------- */

.ms-progress{display:flex;align-items:center;gap:14px;margin:0 0 20px}

.ms-bar{
  flex:1;
  height:9px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
}

.ms-bar i{display:block;height:100%}
.ms-bar i.done{background:var(--accent)}
.ms-bar i.doing{background:rgba(95,211,154,.45)}

.ms-pct{font-family:var(--mono);font-size:.82rem;color:var(--text);white-space:nowrap}

.ms-items{margin:0;padding:0;list-style:none}

.ms-items li{
  display:flex;
  gap:13px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.94rem;
}

.ms-items li:first-child{border-top:0;padding-top:0}

.ms-items .tick{
  width:19px;
  height:19px;
  border-radius:50%;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  font-size:.6rem;
  border:1px solid var(--line-hi);
  color:var(--faint);
}

.ms-items li.done .tick{background:var(--accent);border-color:var(--accent);color:#07090b}
.ms-items li.doing .tick{border-color:var(--accent);color:var(--accent)}

.ms-items .name{color:var(--text)}
.ms-items li.todo .name{color:var(--muted)}

.ms-items .when{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--faint);
  white-space:nowrap;
}

.ms-items .name em{color:var(--text)}

.ms-tags{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}

.ms-tag{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--faint);
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

.ms-tag.played{color:var(--accent);border-color:rgba(95,211,154,.3);background:rgba(95,211,154,.07)}

/* Roadmap phases: a stepper across the top, then one fold per phase. */

.ms-steps{
  display:flex;
  margin:0 0 22px;
  padding:0 0 6px;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-hi) transparent;
}

.ms-steps li{flex:1 1 0;position:relative;min-width:0}

@media (max-width:720px){
  .ms-steps li{flex:0 0 72px}
}

/* The line joining each step to the next, drawn from this step's dot. */
.ms-steps li::before{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:100%;
  height:2px;
  background:var(--line-hi);
}
.ms-steps li:last-child::before{display:none}
.ms-steps li.done::before{background:var(--accent)}

.ms-steps a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 4px;
  text-align:center;
  text-decoration:none;
  color:var(--faint);
}

.ms-steps .dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--line-hi);
  transition:transform .2s var(--ease);
}

.ms-steps li.done .dot{background:var(--accent);border-color:var(--accent)}
.ms-steps li.doing .dot{border-color:var(--accent);box-shadow:0 0 0 4px rgba(95,211,154,.16);animation:ms-pulse 2.4s var(--ease) infinite}
.ms-steps a:hover .dot{transform:scale(1.25)}

.ms-steps .step-n{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.ms-steps .step-name{font-size:.7rem;line-height:1.25;color:var(--muted);hyphens:auto;-webkit-hyphens:auto}
.ms-steps li.doing .step-name{color:var(--accent);font-weight:600}
.ms-steps li.todo .step-name{color:var(--faint)}

@keyframes ms-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(95,211,154,.18)}
  50%{box-shadow:0 0 0 7px rgba(95,211,154,.04)}
}

@media (prefers-reduced-motion:reduce){.ms-steps li.doing .dot{animation:none}}

.ms-phases{display:flex;flex-direction:column;gap:10px}

.ms-phase{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.012);
  scroll-margin-top:120px;
}

.ms-phase.doing{border-color:rgba(95,211,154,.35);background:rgba(95,211,154,.035)}

.ms-phase summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  flex-wrap:wrap;
}

.ms-phase summary::-webkit-details-marker{display:none}

.ms-phase summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg);
  margin:-3px 2px 0 0;
  transition:transform .2s var(--ease);
}

.ms-phase[open] summary::after{transform:rotate(225deg);margin-top:3px}

.ph-n{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.ph-name{color:var(--text);font-weight:600}

.ph-state{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line-hi);
  color:var(--faint);
}

.ms-phase.done .ph-state{color:var(--accent);border-color:rgba(95,211,154,.3)}
.ms-phase.doing .ph-state{color:#07090b;background:var(--accent);border-color:var(--accent)}

.ph-count{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--faint);
}

.ph-bar{display:block;width:56px;height:5px;border-radius:999px;background:var(--surface-hi);overflow:hidden}
.ph-bar i{display:block;height:100%;background:var(--accent)}

.ms-phase .ms-items{padding:2px 14px 12px}
.ms-phase .ms-items li:first-child{border-top:1px solid var(--line);padding-top:12px}

@media (max-width:560px){
  .ms-items li{flex-wrap:wrap}
  .ms-items .name{flex:1 1 calc(100% - 40px)}
  .ms-tags{margin-left:32px}
}

/* ---------- gallery ---------- */

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.g-item{margin:0;min-width:0}
.g-item.is-lead{grid-column:1 / -1}

.g-item a{
  display:block;
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-hi);
  aspect-ratio:16 / 9;
  cursor:zoom-in;
}

.g-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease),filter .3s var(--ease);
}

.g-item a:hover img{transform:scale(1.035);filter:brightness(1.08)}

.g-item figcaption{margin-top:7px;color:var(--faint);font-size:.8rem;line-height:1.4}
.g-item.is-lead figcaption{font-size:.86rem}

@media (max-width:640px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* Full-size viewer, opened from the gallery and from screenshots in the prose. */

.viewer{
  max-width:none;
  max-height:none;
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  border:0;
  background:rgba(4,6,8,.97);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--text);
}

.viewer::backdrop{background:rgba(4,6,8,.6)}

.viewer[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}

.viewer img{max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);border-radius:6px;object-fit:contain}

.viewer p{margin:0;padding:0 16px;max-width:760px;text-align:center;color:var(--muted);font-size:.9rem}

.viewer button{
  position:absolute;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line-hi);
  background:rgba(15,20,24,.8);
  color:var(--text);
  font-size:1.1rem;
  cursor:pointer;
}

.viewer button:hover{border-color:var(--accent);color:var(--accent)}
.viewer .v-close{top:16px;right:16px}
.viewer .v-prev{left:16px;top:50%;transform:translateY(-50%)}
.viewer .v-next{right:16px;top:50%;transform:translateY(-50%)}

.prose .shot img{cursor:zoom-in}

/* ---------- releases ---------- */

.rel + .rel{margin-top:18px}

.rel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.rel-tag{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid rgba(95,211,154,.4);
  background:rgba(95,211,154,.1);
  border-radius:999px;
  padding:3px 11px;
}

.rel:not(:first-of-type) .rel-tag{color:var(--faint);border-color:var(--line);background:transparent}

.rel-when{font-size:.84rem;color:var(--faint);margin-left:auto}

.rel-group{margin-top:18px}

.rel-group h4{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
  margin:0 0 10px;
}

.rel-group ul{margin:0;padding:0;list-style:none}

.rel-group li{
  color:var(--muted);
  font-size:.92rem;
  padding:0 0 10px 20px;
  position:relative;
  max-width:76ch;
}

.rel-group li::before{
  content:"";
  position:absolute;
  left:3px;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
}

/* ---------- prose inside a box ---------- */

.prose > :first-child{margin-top:0}

.prose h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.1rem;
  margin:26px 0 12px;
  color:var(--text);
}

.prose p{color:var(--muted);margin:0 0 16px;max-width:72ch}
.prose strong{color:var(--text);font-weight:500}
.prose a{color:var(--accent)}
.prose ul{margin:0 0 18px;padding:0;list-style:none;max-width:74ch}

.prose ul li{color:var(--muted);margin:0 0 10px;padding-left:22px;position:relative}

.prose ul li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--faint);
}

.prose ul li.has-status::before{display:none}

.prose img{display:block;max-width:100%;height:auto;border-radius:8px}
.prose .shot{margin:4px 0 22px}
.prose .shot img{width:100%;border:1px solid var(--line);background:var(--line)}
.prose .shot figcaption{margin-top:8px;color:var(--faint);font-size:.85rem}

.prose ol{margin:0 0 18px;padding-left:22px;max-width:74ch}
.prose ol li{color:var(--muted);margin:0 0 10px}

.prose .table-scroll{overflow-x:auto;margin:0 0 20px}
.prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:.92rem}

.prose th{
  text-align:left;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
  padding:0 14px 11px 0;
  border-bottom:1px solid var(--line);
}

.prose td{
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  vertical-align:top;
}

.prose td strong{color:var(--text)}

.prose code,.rel-group code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface-hi);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  color:var(--text);
  overflow-wrap:anywhere;
}

.disclosure{
  margin-top:28px;
  padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:.88rem;
}

.disclosure strong{color:var(--text);font-weight:500}

@media (max-width:520px){
  .tabs a{padding:12px 12px;font-size:.85rem}
  .box-body{padding:18px}
  .repo-head{padding-top:28px}
}

.box[id],section[id]{scroll-margin-top:132px}